移动web

1.调试方法

使用谷歌浏览器，模拟移动端。

2.视口

3.meta视口标签

4.物理像素和物理像素比

物理像素是手机的分辨率，在PC端开发，1px不等于手机的1物理像素，而是存在一个比率。
物理像素与1px的比值就是物理像素比。表示1px能显示的物理像素点的个数。

案例：图片在手机端打开变模糊

假设物理像素比2.0，一个PC端5050像素的图片在手机端会变成100100像素，而变模糊。
解决办法是在PC端准备100100像素的图片，设置其宽高为5050，到了手机端变成100*100就不会模糊。

5.背景缩放

防止图片模糊：

6.移动端初始化css

http://necolas.github.io/normalize.css/

7.特殊样式

8.移动端布局方式

（1）流式布局

样例：京东手机版首页。

max-width 最大宽度

min-width 最小宽度

（2）flex布局（弹性布局）

display:flex;

父项属性

子元素在一行内显示，如果宽度不够会把子元素的宽度缩小到放得下。默认是不换行的。

水平对齐和垂直对齐。

子项属性

flex:1； 是占一份如果子项都是flex:1，则为平均分配。
也可以写百分比。

（3）rem布局

什么是rem

媒体查询

不是scree是screen

9.背景颜色渐变

.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #fa5a55, #fa994d);
}

10.less

为何用less

（1）使用

安装easy LESS插件之后，创建.less文件之后，保存就会生成一个css文件，引入这个css文件即可。

（2）嵌套使用

<div><a href="">kuai le</a></div>

div {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;

    a {
        background-color: aqua;
        color: red;
    }
}

（3）hover，加&符号

div {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    a {
        background-color: aqua;
        color: red;
        &:hover {
            color: black;
        }
    }
}

（4）::before

div {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    a {
        background-color: aqua;
        color: red;
        &:hover {
            color: black;
        }
        &::before {
            content: "haha";
        }
    }
}

（5）less运算

@baseFont:50px;

11.rem布局

11.1.页面元素的rem值如何取

12.苏宁移动端首页