前端【响应式】开发详细解析

一、响应式设计需要解决的问题是什么？

针对目前大家常见的固定布局、自适应布局都是一种反应迟钝的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) {}

---

更多视频教程请关注微信公众号！！！！！！！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有