响应式布局详解

响应式布局的目的：为移动设备提供更好的体验，用技术使网页适应从小到大不同分辨率的屏幕

有一句话对响应式布局的形容非常贴切：content like water。

1.viewpoint

viewpoint：屏幕上用于显示网页的一块区域（可能比浏览器的视区要宽，也可能要窄）

viewpoint理论

移动设备上的viewpoint可分为：1）layout viewpoint （如显示器的宽度，大于浏览器的可视宽度）

                                                   2）visual viewpoint （浏览器的可视宽度，和浏览器的大小相同）

                                                   3）ideal viewpoint  (移动设备的理想宽度，随移动设备的大小不同而不同)

利用元数据标签对viewpoint进行控制

content="width=device-width"  表示viewponit的宽度采用设备宽度（即ideal viewpoint的宽度)

initial-scale="1.0"  表示缩放比例为1.0，也就是viewpoint的一倍，也就是和ideal viewpoint是一样的。

 

2.css媒体查询

媒体查询有两种方式

1）元素中的css媒体查询

2)样式表中的css媒体查询

@media screen and(min-width:600px){
...
...
...
}

事实上，媒体查询就是做出一些限制条件，满足哪些限制条件，就采用哪一个样式，由于移动设备的屏幕的大小各不相同，所以媒体查询的使用就会很广泛，因为不同的设备的布局方式等等都是不一样的。

 

3.如何下手响应式

1）设置viewpoint

2）用媒体查询设置断点（min-width, max-width, max-height, min-height, landscape, portrait）

       ·先规划好断点，如（手机，平板，PC）

       ·遇到具体情况在增加具体断点

       ·几个关键点，手机横屏，平板竖屏，PC宽屏和窄屏

注意：要知道设置min-width和的区别：min-width是移动端有限的设置方式，屏幕从小到大向上面兼容，max-width相反

 

4.响应式布局

1）流体                       设置较少的断点（利用媒体查询）所有内容使用flex:1;

2）固定+流体              设置较多的断点，部分内容使用flex:1;

3）表现形式改变        就是屏幕不断变化时，display:hidden与display:block以及宽高等等的变化

 

5.响应式图片

 sizes="(max-width:414px) 100vw, 640px" 表示我们对图片的需求，当小于414px时，就去原值，大于414px时，取640px，其中的100vw表示屏幕的100%显示，就是全屏显示。

srcset="img/large.png 960w,  img/medium.png 640w,  img/small.png 320w" 表示可供我们选择的图片规格，其中w是宽度描述符，在这里就是px的意思。图片选取原则：完全吻合原尺寸>大于原尺寸>小于原尺寸的最接近的尺寸

补充：上面w是宽度描述符，常用的还有x（设备像素比描述符）

如：

srcset="img/large.png 2x"

设备像素比(devicepixelradio)：dpr=物理像素/独立像素（CSS像素）              值为1时为标准屏，值为2时为2倍屏

更多关于移动设备的信息（像素密度，设备像素比，retina屏）参考我的下一篇文章retina显示屏

 

 

本博客由博主原创，如需转载需说明出处！谢谢支持！