对css移动端开发的浅认识

一、视口

视口就是浏览器显示页面内容的屏幕区域。视口可以分布为布局视口、视觉视口和理想视口

1、布局视口layout viewport

（1）一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题

（2）IOS、Android都把视口分辨率设置为980px，所以pc端上的页面大多都能在手机上呈现，只不过元素看起来很小，一般只能手动缩放页面

2、视觉视口 visual viewport

用户正在看到的网站的区域，可以通过缩放操作视觉视口，但是不会影响布局视口，布局视口仍然保持原来的宽度

3、理想视口 ideal viewport

（1）为了使网站在移动端有最理想的浏览和阅读宽度而设定

（2）理想视口，对设备来讲，是最理想的视口尺寸

（3）需要手写meta视口标签来通知浏览器操作

（4）meta视口标签的目的：布局视口的宽度和理想视口的宽度保持一致，就是设备有多宽，布局的视口就有多宽

meta 视口标签

<meta name="viewport"content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0">

width viewport宽度，可以设置device-width特殊值

initial-scale 初始缩放比，大于0的数字

maximum-scale 最大缩放比，大于0的数字

minimum-scale 最小缩放比，大于0的数字

user-scalable 用户是否可以缩放，yes或no

视口宽度和设备一致、默认缩放比1:0，不允许用户自行缩放、最大允许缩放比1.0，最小允许缩放比1.0

二、二倍图

1、物理像素&物理像素比

物理像素点指屏幕显示的最小颗粒，1px在PC端等于1物理像素，但是移动端不一定，一个1px能显示多少物理像素点成为屏幕像素比

视网膜屏幕是一种显示技术，把更多物理像素点压缩至一块屏幕内，从而达到更多分辨率

2、多倍图

图片在手机中打开，会按照物理像素比放大，出现模糊现象，因此用倍图的方式（放二倍大小的图片再缩小到需要的大小）

3、背景缩放

1、background-size

2、规定背景图像尺寸，两个参数为高度，宽度，只写一个参数就是指宽度，等比例缩放

3、单位可以是百分比，是相对父盒子的百分比

4、cover：等比例缩放，要求完全覆盖盒子 ，可能有部分背景图片显示不全

5、contain: 等比例缩放，尽量铺满不会超出，可能会有空白

三、移动端开发选择

1、单独制作移动端页面（主流）

2、响应式页面兼容移动端

3、CSS3盒子模型box-sizing

boxing-size:border-box;(传统是content-box)

 传统盒子模型
        boeder-sizing:center-box

css3盒子模型 
        box-sizing: border-box;

padding和border不会再撑大盒子举个例子：

传统盒子模型：

div:nth-child(1){
            /* 传统盒子模型=width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

css3盒子模型

  }
        div:nth-child(2){
            box-sizing: border-box;                       
             // 有了这句话，就让盒子变成css3的盒子模型 
            //padding 和 border 不会再撑大盒子 
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;

        }

结果展示：

移动端可以完全兼容CSS3

以下有几个特殊样式，可以写到公共样式的css文件中

  a{
            -webkit-tap-highlight-color:transparent ;
            /* 去除高亮效果 */
        }
        input{
            -webkit-appearance: none;
        }
        a{
            -webkit-touch-callout: none;
        }

        /* 禁用长按页面弹出菜单 */

五、移动端常见布局

主要包括流式布局、flex布局、rem布局

1、流式布局

百分比布局，非固定像素布局

（1）通过盒子的宽度设置成百分比来根据屏幕伸缩

（2）需要设定最大值最小值，防止影响内容显示max-width: min-width

2、flex布局

（1）传统布局兼容性好，但是布局繁琐，局限性高

（2）伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

（3）flex布局在PC端支持较差，移动端应用广泛

（4）采用flex布局的元素称为flex容器，所有子元素自动成为容器成员，成为flex项目，简称项目

布局原理

（1）任何一个容器都可以使用flex布局

（2）父盒子设为flex布局后，子元素的float、clear、和vertical-align属性失效

（3）原理：通过给父盒子添加flex属性，控制子盒子的位置和排列方式

在前面的文章又有单独介绍flex布局的文章，有需要的小伙伴可以去看其面对文章。

3、rem布局

rem单位

root em相对单位，em是父元素字体大小

rem是相对于html元素的字体大小

优点：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制

利用rem布局的话需要引入一个js插件

4、媒体查询

媒体查询是CSS3新语法

可以针对不同屏幕尺寸设置不同样式

@media mediatype and|not|only (media feature){
    
}
@media screen and (min-width:500px){
    body{
        background-color:red
    }
}

mediatype:媒体类型

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕

媒体特性

width：定义

max-width:800 只有宽度小于800时，才执行下面样式

（1）screen还有and必须带上

（2）必须带单位px

（3）媒体查询+rem可以实现不同设备里尺寸动态变化，给html设定font-size，然后设置字体行高（rem单位）等随宽度变化。