0_9 移动端、媒体查询、响应式布局

1、像素和视口

1.1  像素：

　　物理像素：分辨率数

　　css像素：编写网页时，所用都是css像素

　　浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现 ， 一个css像素最终由几个　　　　　　　　　　　　　　物理像素显示，由浏览器决定：    默认情况下在pc端，一个css像素 = 一个物理像素  

1.2 视口

屏幕中用来显示网页的区域 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值   默认情况下：         视口宽度 1920px（CSS像素）                         1920px（物理像素）                         - 此时，css像素和物理像素的比是 1:1  放大两倍的情况：          视口宽度 960px（CSS像素）                         1920px（物理像素）                         - 此时，css像素和物理像素的比是1:2    

2、移动端页面

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口                 将网页的视口设置为完美视口                 <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.1移动端开发注意事项

在移动端开发时，就不能再使用px来进行布局了 vw 表示的是视口的宽度（viewport width）             - 100vw = 一个视口的宽度             - 1vw = 1%视口宽度   vw这个单位永远相当于视口宽度进行计算             设计图的宽度　　 750px 1125px                            设计图   　　　　  750px               使用vw作为单位     100vw               创建一个 48px x 35px 大小的元素             100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px             6.4vw = 48px(设计图像素)             4.667vw = 35px vm适配的问题10_flex\09.vw适配.html

3、响应式布局

网页可以根据不同的设备或者窗口大小，呈现不同的效果，可以使一个网页适用于所有设备 关键：媒体查询　　通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式  

4、媒体查询

语法： @media 查询规则{　} 媒体类型：                     all 所有设备                     print 打印设备                     screen 带屏幕的设备                     speech 屏幕阅读器                     - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系 可以在媒体类型前添加一个only，表示只有。 only的使用主要是为了兼容一些老版本浏览器   媒体特性：                 width 视口的宽度                 height 视口的高度                 min-width 视口的最小宽度（视口大于指定宽度时生效）                 max-width 视口的最大宽度（视口小于指定宽度时生效）   如：

1 @media only screen and (min-width: 500px) and (max-width:700px){
2     body{
3          background-color: #bfa;
4              }
5 }

 

     

 

 

标签：视口,查询,width,像素,响应,宽度,vw,移动,css
来源： https://www.cnblogs.com/tybm/p/15962721.html