响应式网页杂谈

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值