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 视口的最大宽度（视口小于指定宽度时生效）

 

如：

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