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框架:完全响应式的。