一、响应式设计需要解决的问题是什么?
针对目前大家常见的固定布局、自适应布局都是一种反应迟钝的web设计,当Web页面需要在各种显示屏显示时,他们就显得力不从心了。因此,我们就需要相应设计。
优势:
一个页面适应各种显示屏;
具有良好的SEO;
较大缩短开发周期;
给用户更多的选择,更好的用户体验;
二、响应式包含哪些部分?
在学习响应式设计时,我们需要知道以下几个常见的术语。
1、流体网格
一个简单的网格系统,将每个格子使用百分比单位来控制网格大小,其优势是网格随着屏幕大小作出对于的比例缩放。
2、弹性图片
弹性图片是指不给图片设置固定尺寸,而更具流体网格进行缩放来适应不同的尺寸。实现方法如下代码:
img{
max-width:100%;
}
注:IE8中会使图片不显示,所以需在IE8中增加对于hack样式。
3、CSS3 Media Queries
它是响应式设计最关键的一个应用,它可以根据浏览器窗口的大小、方向、屏幕规格选择对于的样式文件。
4、屏幕分辨率
所谓屏幕分辨率是指:分辨率是1920设备像素*1080设备像素,在纵向上排列了1080个显像用的小点,在横向上排列了1920个显像用的小点,同一尺寸的屏幕下,分辨率越高(横向、纵向上的显像点越多越小)屏幕越清晰。
问题:在高清屏和普通屏下,css的100px展示会不会有差异?
答案是:不会有差异!
在普通的屏幕下1px占用一个设备像素,而在高清屏幕下(如苹果的视网膜屏)1px占用2个设备像素。以iphone6来说物理像素是750 * 1334,因为是高清屏幕,所以用px来度量的话就是 375px * 667px。这个可以在chrome浏览器的调试模式下查看。
5、主要断点
断点是为min-width和max-width服务的。@media (min-width:320px){}
三、One More Thing?
1、自适应布局盒响应式布局区别
自适应布局:就是我们常见的百分比布局,它可以让你的布局在不同分辨率下适应其大小,但这种布局需要一个最小宽度来辅助实现,不然在一定尺寸下,整个布局会乱掉,只不过这种不固定值是%而不是px。
响应式布局:是一个多列流体布局,其利用的是媒体查询来实现web页面在不同分辨率下的完美呈现,和自适应布局还是有本质上的差别。
2、em在响应式设计中的运用
em和font-size优很大关系,它也是css的一个度量单位,不过它比px更适合响应式设计,他能让你的断点根据字号大小来调整其值。
20em = 20 * 16 = 320px
30em = 30 * 16 = 480px
@media only screen and (min-width : 20em) {}
@media only screen and (min-width : 30em) {}
3、常用css单位
常用有三种:px em %
px:浏览器的度量单位,相对于物理像素,1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素。
em:相对于父元素的font-size,如父元素font-size设置为16px,子元素font-size设置为0.75em,那么转换为px就是0.75 * 16px = 12px;
%:相对于父元素的长度高度,position:fixed 、absolute 除外(fixed将相对于窗口、absolute相对于递归父元素知道 第一个设置了position的元素)
rem:相对于根节点(一般为html节点)的font-size,如果html节点设置font-size = 100px,那么文档中的元素设置为0.3rem,则计算为:0.3 * 100px = 30px
vh/vw:相对于设备的可视范围,在移动端中经常会用到,比如:设计师经常要求,banner占满首屏高度既:100vh。如iphone6 (375px * 677px)= (100vw * 100vh) ,而iphone6 plus (414px * 736px) = (100vw * 100vh) 两种屏幕下的vw、vh是不一样的。
clac:css3中的长度计算语法,支持+、-、*、/的计算。
四、响应式设计关键三步
第一步、设置meta标签
使用设备的宽度为视图的宽度,禁止默认的自适应页面的效果,禁止缩放效果。如下:
由于IE6-IE8不支持响应式设计,所以需增加相应插件来支持respond.js或者media-queries.js,如下:
<!--[if lt IE9]>
<script src=‘http://xxx/response.js‘></script>
<![end]-->
第二步、HTML MarkUp
基础一般会包括:头部、导航、内容、页脚。
第三步、媒体查询
1、一般用min-width和max-width来检查各种设备的分辨率大小
@media screen and (min-width : 768px) {}
@media screen and (max-width : 1024px) {}
@media screen and (min-width : 768px) and (max-width : 1024px) {}
2、设备宽度device-width主要用在苹果产品上
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
3、调用独立样式表
常用模板:
1024px显示屏:@media screen and (max-width : 1024px) {}
ipad横屏:@media screen and (max-device-width : 1024px) and (orientation:landscape) {}
ipad竖屏:@media screen and (max-device-width : 768px) and (orientation:portrait) {}
iphone和smartPhone:@media screen and (min-width : 320px) and (max-width : 480px) {}
大屏幕、中屏幕、小屏幕的划分:
小屏幕:<769px;@media only screen and (min-width : 769px) {}
中屏幕:769~1366px或者769~1440px;@media only screen and (min-width : 769px) and (max-width:1366px){}
大屏幕:1366~1920px;@media only screen and (min-width : 1367px) {}
更多视频教程请关注微信公众号!!!!!!!