响应式布局详解

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

有一句话对响应式布局的形容非常贴切: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显示屏

 

 

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

 

你可能感兴趣的:(CSS)