响应式网页杂谈

1.   先介绍响应式网页的概念

在不同的终端显示不同的网页,能够适应不同的设备.

响应式WEB设计理念：页面的设计与开发应当根据用户行为以及设备环境进行相应的调整。

(1)响应式网页的构成

最重要是第三个

(2)测试响应式网页

快捷键f12

(3)如何实现自适应网页

Device-width//设备宽度

Initial-scale=1//原始缩放比例为1

User-scalable//用户不能对设备网页进行缩放（视口）

Viewport HTML中可以指定大小，以下是物理视口和viewport视口作比较

总结：

基于媒介查询：

//为屏幕宽度为0-800px之间的设备设置样式

@media screen and(max-width:800px){    

 //css样式

}

//为屏幕宽度为800-1024px之间的设备设置样式

@media screen and(min-width:800px)and (max-width:1024px){    

 //css样式

}

//为屏幕宽度为1025px以上的设备设置样式

@media screen and(min-width:1025px){

//css样式

}

屏幕设备除了screen还有print(打印设备)。screen设备有一个属性orientation,这个属性有两个参数：portrait,(纵向屏幕)；landscape(横向屏幕);

CSS3媒介查询在CSS中通过逻辑条件将浏览器依据窗口属性进行区分，并基于此来完成不同样式的渲染。

Max-width:有些浏览器版本不支持，可以用其他实现方式

（4）响应式布局的优缺点

2、 响应式设计总结

（1）动态导航栏的响应式设计

对于较小的浏览器窗口，动态导航栏可以设置为简单的selelct菜单。对于较大的浏览器窗口，可以使用简单的ul列表来实现动态导航栏。

(2) 基于尺寸的响应式内边距

理解盒模型：一个元素所占的总宽度=2*（外边距+边框+内边距）+内容宽度。

假设一张图像在正常的非响应式状态下的宽度是200px,典型的内边距可能是8px，使用盒模型。

2*（0+8+0）+200=216px；

使用边距除以总宽度，即4%；

在创建响应式百分比宽度图像，给图像添加一个内边距为4%的类

.responsive{

max-width:100%;

height:auto;

padding:4%;

}

父元素变化时，图像内边距也会作相应调整。

(3)创建自适应的响应式字体

rem:字体尺寸与根元素有关（not 父元素）

.html{

font-size:12px;

}

p.b{

font-size:2rem;

}

（4）基于媒介查询隐藏元素

根据浏览器窗口的大小，通过媒介查询使页面上的某些元素从屏幕上消失

dispaly:none;

(5)常见的响应式框架：

流式960网格布局：在960px宽的窗口中布局最完美，使用了百分比宽度，左浮动代替了固定宽度的网格元素。

使用blueprint网格布局：静态的css网格框架，修改添加代码即可拥有一个响应式框架。

基于三分法的流式布局：静态框架Golden grid。

响应式960网格框架。

bootstrap框架：完全响应式的。