移动端

媒体查询

   媒体查询 
                          媒体查询：由设备类型、监测设备特性表达式构成。
               
                           @media 设备类型 and (表达式) and (表达式){

                            选择符{

                            }
                          }

               注意       and两侧必须有空格
                          not放在设备类型的前面（反向选择【排除某个范围】）


               作用    对页面的样式进行微小调整
                         字体大小 浮动 等...
                         
                         
               垂直           @media all and (orientation:portrait){
                                    body{
                                        background:red;
                                    }
                                        }
               横向           @media all and (orientation:landscape){
                                    body{
                                        background:blue;
                                    }
                                }

移动端的准备

 移动端的准备   
           

                1     采用meat标签 

                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                            width = device-width：宽度等于当前设备的宽度
                            initial-scale： 初始的缩放比例（默认设置为1.0）
                            minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
                            maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
                            user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）


                2    根据设计图的宽度  采用不同的dpr

                        640px  750px的设计图  dpr  为2
                        大于750px的设计图   dpr 为3

                 单位   px /  pt /  em / deg / %  / rem  / vw / vh  /  vmin  /  vmax
                       
                        rem 等于html中字体设置的大小
                        默认情况下  1rem=16px 

                        px设置的元素打下不会改变  为了让元素改变 会使用rem 代替像素
                        通过改变html中 font-size:;设置的大小  来改变元素的大小  
                        rem 布局

                        又为了让元素在不同分辨率进行适配  字体大小的PX值不会改变
                        需要寻求一个可以根据设备分辨率的大小来改变 引出来vw  即视口的宽度
                        100vw=视口的宽度

                      1  设计图为640px 以为dpr=2 所写的css样式需要物理像素/dpr   则 100vw=320px
                         1vw=3.2px
                         100px=31.25vw


                      2  设计图为750px 以为dpr=2 所写的css样式需要物理像素/dpr   则 100vw=375px
                         1vw=3.75px
                         100px=26.67vw

                         各个元素的大小根据1rem=100px 进行换算

                3    更改reset样式  把所有盒子变成怪异盒模型 

                     在index中根据设计图添加 html 中 font-size:;的 vw值