CSS之Responsive设计的关键三步

下面我们就通过这篇教程，帮助大家从三个步骤来了解和学习“Responsive”设计

第一步：Meta标签

大家都知道，现在智能手机上浏览web页面会让页面适应屏幕的大小，显示在屏幕上。不过我们可以通过“meta”标签对他进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下

另外一点，由于“Responsive”设计是结合CSS3的Media Queries属性，才能尽显这种风格的设计，但大家都懂，在IE6-8中完全是不支持CSS3 Media Queries的。那么为了让IE6-8支持，我们就很有必要的在IE9以下的浏览器中加上media-queries.js或者respond.js脚本

第二步：HTML Markup

在这个实例中，有一个最常见，最基础的HTML Markup。他主要包括了一个“头部”、“主内容”、“边栏”和“页脚”四个主要部分。而且其中“头部”固定了一个高度值“180px”；“主内容”宽度设置为“600px”；“边栏”的宽度为“300px”。这些只是一些最基本的样式值。你可以根据你的需求进行更详细的设置。这里不在做另外说明

第三步：Media Queries

CSS3的Media Queries是“Responsive”设计中的重要一部分，主要用他来告诉浏览器在一定条件之下如何进行渲染web页面。在这里我们只展示的是让CSS3 Media Queries告诉浏览器在一定的条件下如何渲染上面所说四部分的宽度值而以

3.1 下面这种规则是当浏览器可视大小等于或小于“980px”的布局。从代码中可以清楚的看到，在浏览器可视大小符何下面条件时，整个布局从固定布局转为流体布局，具体请看代码的变化

3.2 接下来我们在来看第二种情况：浏览器可视化大小等于或小于700px时，把“＃content”和“#sidebar”的宽度设为“auto”并把他们的“float”重置为“none”，也就成了一列的满屏显示，具体代码如下

3.3 最后我们在一起来看一下手机上的渲染：当显示器可视大小等于或小于480px时，将“#header”的高度重置为“auto”，并把“h1”的字号重置为“24px”,最后在把“#sidebar”给隐藏了

上面只是写了三种情效果的效果，大家可以根据自己的爱好设定更多的条件。而且也可以还可以将页面的更细致的样式渲放在指定的条年中，达到不同的效果渲染。换句话说：通过CSS3的Media Queries在不同一条件中使用不同的样式规则，渲染出不同的页面效果。这里只是做了一基本的使用介绍

CSS之Responsive设计的关键三步相关推荐

[杨小米私房菜]炒青菜不出水的关键三步--豆豉鲮鱼油麦菜
(原创图文转载仅限新浪博客其余途径请勿转载) 周末买了一盒鲮鱼罐头,感觉现在的罐头怎么也没有小时候的好吃了,也许是长大了,口味变了.剩了大半盒扔掉可惜,就和着做个豆豉鲮鱼油麦菜吧,其实油麦菜我还是觉得 ...
html绘制图形的关键三步,基于HTML5的绘图——绘制简单图形
绘制矩形 HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect().strokeRect()和clearRect().这些函数的语法格式如下所示: context.fillRect ...
CSS之Responsive设计和CSS3 Media Queries的结合
随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...
保护工控系统网络安全的关键三步
当前,工业控制系统(ICS)面临一系列数字威胁.其中两个方面尤其突出.一方面,数字攻击者在获得工业公司的非授权访问方面越来越在行.有些攻击者采用恶意软件,另一些诉诸于渔叉式网络钓鱼(或钓鲸)和其他社会 ...
CSS之Responsive网页设计的三个特性
Responsive网页设计无疑是网页设计中的一个热门话题.某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说"iPad"."iP ...
HTML5实践 -- 三步实现响应式设计
HTML5实践 -- 三步实现响应式设计响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章<HTML5实践 -- 流式响应式设计>.如果你是一个初学者,可能响应式 ...
三步完整实现运放负反馈电路稳定性设计
1.模拟量采集系统稳定性分析重要性集成运算放大器的参数有很多,但涉及到实际应用环境的不同,一些参数非常重要,另外一些则相对次要.例如,在交流高频领域,会重视带宽和压摆率,而在直流精密场合,则重视输入 ...
让机器人飞入寻常百姓家，优必选这三步棋很关键
9月27日,机器人明星公司优必选在上海召开年度发布会,发布了便携式智能机器人悟空和全球首个大规模商用的服务机器人操作系统ROSA,同时与上海当代艺术馆达成跨界战略合作,并宣布日本Robi机器人之父高桥 ...
图像信噪比计算公式_CT 科研设计之图像质量对比研究三步曲
CT科研是CT技术的窗口,帮助医务工作者开展CT科研也是我们的责任和义务! 问如何科学地比较不同重建技术的图像质量? 答首先要排除其他影响图像质量的因素, 然后进行客观指标的比较, 最后进行主观指 ...

CSS之Responsive设计的关键三步

下面我们就通过这篇教程，帮助大家从三个步骤来了解和学习“Responsive”设计

第一步：Meta标签

大家都知道，现在智能手机上浏览web页面会让页面适应屏幕的大小，显示在屏幕上。不过我们可以通过“meta”标签对他进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下

第二步：HTML Markup

第三步：Media Queries

CSS3的Media Queries是“Responsive”设计中的重要一部分，主要用他来告诉浏览器在一定条件之下如何进行渲染web页面。在这里我们只展示的是让CSS3 Media Queries告诉浏览器在一定的条件下如何渲染上面所说四部分的宽度值而以

3.1 下面这种规则是当浏览器可视大小等于或小于“980px”的布局。从代码中可以清楚的看到，在浏览器可视大小符何下面条件时，整个布局从固定布局转为流体布局，具体请看代码的变化

3.2 接下来我们在来看第二种情况：浏览器可视化大小等于或小于700px时，把“＃content”和“#sidebar”的宽度设为“auto”并把他们的“float”重置为“none”，也就成了一列的满屏显示，具体代码如下

3.3 最后我们在一起来看一下手机上的渲染：当显示器可视大小等于或小于480px时，将“#header”的高度重置为“auto”，并把“h1”的字号重置为“24px”,最后在把“#sidebar”给隐藏了

CSS之Responsive设计的关键三步相关推荐

最新文章

热门文章