移动布局基础（流式布局）PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE

浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器等等

总结：兼容移动端主流浏览器，只需要处理webkit内核即可

手机屏幕的现状

移动端设备屏幕尺寸非常多，碎屏化非常严重，常用单位是px

常见移动端屏幕尺寸

移动端调试方法

利用谷歌浏览器模拟手机调试

总结

移动端浏览器主要针对于webkit内核进行开发
常说的移动端主要是手机端开发
移动端碎屏化非常严重，分辨率和屏幕尺寸大小不一样
学会用谷歌浏览器模拟手机界面及调试

视口（viewport）

视口是浏览器显示页面的屏幕区域视口：布局视口视觉视口理想视口

布局视口( layout viewport)

主要是解决早期pc页面在手机上显示的问题，基本都将这个视口分辨率设置为980px

视觉视口（visual viewport）

网站的区域不会影响视觉视口

理想视口（ideal viewport）

理想视口对设备来讲是最理想的视口尺寸
需要手动添加meta视口标签来操作视口
meta视口标签的目的：布局视口应当于理想视口的宽度一致，简单理解:就是设备有多宽，布局视口就有多宽

总结

视口是浏览器显示页面的屏幕区域
视口：布局视口视觉视口理想视口
理想视口需要手动添加meta标签。简单来说设备有多宽布局视口就有多宽

meta视口标签

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

注意：移动端必须要添加视口标签，否则在移动端的开发过程中，会遇到诸多问题

标准的viewport

设备宽度应当与视口宽度一致
不允许用户缩放
初始的缩放比例为1
最大允许的缩放比例为1
最小允许的缩放比例为1

物理像素和物理像素比

物理像素点是指屏幕中显示的最小颗粒，是物理真实存在的
开发过程中，在pc端中1px等于1个物理像素点，但在移动端中，1px不等于1个物理像素
1px等于物理像素点的个数，被称为物理像素比

早期的移动端开发，1px等于1个物理像素点，随着视网膜技术的出现，将更多的物理像素点压缩至一块屏幕中，提高屏幕的分辨率，使屏幕看起来更加清晰

多倍图

实际开发中，图像会在视网膜屏中被放大n倍，

因此正确的做法是：我们准备的图像比实际图像大n倍，然后再手动缩小n倍，这样就可以不再让图像模糊的bug

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img:nth-of-type(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 在移动端的实际开发过程中，我们准备的图像比实际的图像大n倍，然后再手动缩小原来的n倍，即可解决像片模糊的问题 -->
    <!-- 50*50的图像 -->
    <img src="./img/apple50(1).jpg" alt="">
    <!-- 100*100的图像 -->
    <img src="./img/apple100.jpg" alt="">

</body>

</html>

背景图

background-size:规定背景图像的尺寸

单位：长度 | 百分比 | conver | contain
cover:把背景图像扩展至足够大，使背景图片能够完全覆盖背景区域。
contain:将背景图像扩展至最大尺寸，使其高度和宽度完全适应内容区域
注意：只写一个参数默认为宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 0px auto;
            background: url(./img/picture.jpg) no-repeat;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

背景多倍图

与多倍图的做法类似，但容器要缩小至背景图像一致

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            /* 背景图像：100*100 */
            background: url(./img/apple100.jpg) no-repeat;
            margin: 0px auto;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

注意：多倍图切图使用cutterman即可

移动开发选择

单独制作移动端页面

京东商城手机版
淘宝触屏版
苏宁易购手机版

通常情况下，只要在网站区域前面加上m，即可打开移动端页面，移动设备打开，则自动跳往移动端页面

响应式页面兼容移动端

三星手机官网

核心：根据判断屏幕的宽度来改变样式，适应不同的终端

响应式制作页面比较麻烦，需要花很大精力去调兼容性问题

总结

兼容移动端页面只需兼容webkit内核
可以放心的使用h5和css3的新特性
浏览器的私有前缀只需要添加webkit即可

移动端技术解决方案

引进css初始化样式： normalize.css/

官网地址：necolas.github.io/normalize.c…

特殊样式

css盒子模型

传统的盒子模型：盒子的宽度 = width + padding + border
css3盒子模型：盒子的宽度 = width(border+padding)

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

注意：移动端可以放心的使用css3盒子模型，pc端不考虑兼容性的话，也可使用css3盒子模型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 800px;
            padding: 20px;
            margin: 20px auto;
            background-color: purple;
            border: 5px solid red;
            /* 引进css3盒子模型 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

去除高亮效果

-webkit-tap-highlight-color: transparent;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>

<body>
    <a href="#">尧子陌</a>
</body>

</html>

按钮自定义样式

-webkit-appearance: none;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <input type="button" value="尧子陌">
</body>

</html>

禁止页面长按弹出菜单

-webkit-touch-callout: none;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img,
        a {
            -webkit-touch-callout: none;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="./img/apple100.jpg" alt="">
    <a href="https://www.baidu.com/">百度</a>
</body>

</html>

移动端常见布局

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

百分比布局
flex布局
rem + less + 媒体查询
混合布局

响应式页面兼容移动端

媒体查询
bootstrap

流式布局

流式布局:百分比布局，也称非像素固定布局
宽度设置成百分比，不受固定像素的限制，内容向两侧延伸
百分比布局是移动web开发常见的布局方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            margin: 100px auto;
            border: 1px solid red;
        }
        
        div {
            width: 50%;
            float: left;
            height: 150px;
            background-color: rgb(223, 25, 25);
        }
        
        div:nth-of-type(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

移动布局基础（流式布局）

浏览器现状

手机屏幕的现状

常见移动端屏幕尺寸

移动端调试方法

总结

视口（viewport）

布局视口( layout viewport)

视觉视口 （visual viewport）

理想视口（ideal viewport）

总结

meta视口标签

物理像素和物理像素比

多倍图

背景图

背景多倍图

移动开发选择

单独制作移动端页面

响应式页面兼容移动端

总结

移动端技术解决方案

引进css初始化样式： normalize.css/

特殊样式

css盒子模型

去除高亮效果

按钮自定义样式

禁止页面长按弹出菜单

移动端常见布局

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

响应式页面兼容移动端

流式布局

视觉视口（visual viewport）