浏览器现状

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

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

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

手机屏幕的现状

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

常见移动端屏幕尺寸

移动端基础之流式布局(一)流式布局之JD

移动端调试方法

移动端基础之流式布局(一)流式布局之JD

总结

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

视口

浏览器是显示页面的屏幕区域

视口：布局视口视觉视口理想视口

布局视口

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

视觉视口

网站的区域，不影响布局视口

理想视口

理想视口，对设备来讲，是合适的视口尺寸
要手动添加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

<!doctype html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>meta标签</title>
</head>

<body>
    Hello Word
</body>

</html>

移动端基础之流式布局(一)流式布局之JD

物理像素与物理像素比

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

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

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物理像素比</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 375px;
            height: 667px;
            background-color: pink;
        }
    </style>
</head>

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

</html>

pc下的物理像素比

移动端基础之流式布局(一)流式布局之JD

iphone 6物理像素比

移动端基础之流式布局(一)流式布局之JD

多倍图

实际开发中，图像会在视网膜屏中被放大n倍 我们准备的图像比实际图像大n倍，然后再手动缩小n倍，即可解决图像模糊的问题

iphone 6下的物理像素比为2.0 因此手动缩小至2倍

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二倍图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img:nth-of-type(1) {
            width: 25px;
            height: 25px;
        }
        
        img:nth-of-type(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 实际开发中 我们准备的图像比实际的图像大n倍  手动缩小n倍  即可解决图像模糊的问题 -->

    <!-- 50*50 -->
    <img src="./images/apple50.jpg" alt="">

    <!-- 100*100 -->
    <img src="./images/apple100.jpg" alt="">
</body>

</html>

移动端基础之流式布局(一)流式布局之JD

背景图

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

单位：长度 | 百分比 | cover | contain
cover:背景图像扩展至足够大，使背景图片能够完全覆盖背景区域。
contain:背景图像扩展至最大尺寸，使其高度和宽度完全适应内容区域

注意：只写一个单位，默认为宽度

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-size</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 600px;
            height: 600px;
            margin: 200px auto;
            border: 1px solid red;
            background: transparent url(./images/bady.jpeg) no-repeat scroll;
            /* 背景图像扩展足够大  使背景图像完全覆盖背景区域 */
            /* background-size: cover; */
            /* 背景图像扩展至最大尺寸  使高度与宽度完全适应背景区域 */
            background-size: contain;
        }
    </style>
</head>

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

</html>

移动端基础之流式布局(一)流式布局之JD

背景多倍图

与多倍图的做法一致，使用background-size使背景图像缩小至n倍

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景多倍图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 50px;
            height: 50px;
            margin: 20px auto;
            border: 1px solid red;
            background: transparent url(./images/apple100.jpg) no-repeat scroll;
            background-size: 50px 50px;
        }
    </style>
</head>

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

</html>

移动端基础之流式布局(一)流式布局之JD

移动端开发选择

单独制作移动端页面

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

网站区域前面加上m，即可打开移动端页面

移动端基础之流式布局(一)流式布局之JD

响应式页面兼移动端

三星官网

移动端基础之流式布局(一)流式布局之JD

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

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

总结

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

移动端技术解决方案

normalize.css

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

移动端基础之流式布局(一)流式布局之JD

官方下载：https://necolas.github.io/normalize.css/8.0.1/normalize.css

特殊样式

CSS盒子模型

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

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

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

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            margin: 20px auto;
            padding: 50px;
            border: 2px solid blue;
            background-color: red;
            /* css3盒子模型 */
            box-sizing: border-box;
        }
    </style>
</head>

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

</html>

移动端基础之流式布局(一)流式布局之JD

去除高亮效果

-webkit-tap-highlight-color: transparent;

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>-webkit-tap-highlight-color</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            /* 去除高亮效果 */
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>

<body>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百度</a>
</body>

</html>

移动端基础之流式布局(一)流式布局之JD

按钮自定义样式

-webkit-appearance: none;

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>-webkit-appearance</title>
    <style>
        input {
            /* 去除按钮自定义的默认样式 */
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <input type="button" value="按钮">
</body>

</html>

移动端基础之流式布局(一)流式布局之JD

禁止页面长按弹出菜单

-webkit-touch-callout: none;

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>-webkit-touch-callout</title>
    <style>
        a {
            /* 禁止页面长按弹出菜单 */
            -webkit-touch-callout: none;
        }
    </style>
</head>

<body>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百度</a>
</body>

</html>

移动端基础之流式布局(一)流式布局之JD

移动端技术选型

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

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

响应式页面兼容移动端

媒体查询
bootstarp

流式布局

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

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>流式布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            /* 最大的宽度 */
            max-width: 980px;
            /* 最小的宽度 */
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: green;
        }
        
        section div:nth-child(2) {
            background-color: greenyellow;
        }
    </style>
</head>

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

</html>

移动端基础之流式布局(一)流式布局之JD

图片格式

移动端基础之流式布局(一)流式布局之JD

移动端二倍精灵图

1.在GIMP中的精灵图等比例缩放为原来的一半
2.根据大小测量坐标
3.background-size的值要把宽度设置为原来宽度的一半

流式布局之JD

项目之前期准备

项目文件夹

移动端基础之流式布局(一)流式布局之JD

css文件之样式分类

normalize.css:css初始化样式
index.css:首页样式

设置视口标签及引入normalize.css

移动端基础之流式布局(一)流式布局之JD

body设置样式

移动端基础之流式布局(一)流式布局之JD

header区域

移动端基础之流式布局(一)流式布局之JD

header区域分为4个盒子由ul li组成
1号盒子宽度设置为8%
2号盒子宽度设置为10%
3号盒子宽度设置为57%
4号盒子宽度设置为25%

search-wrap区域

移动端基础之流式布局(一)流式布局之JD

search-wrap区域分为3个盒子
1号盒子为search-bth(搜索按钮) 设置固定宽高可以使用伪元素方法插入图像
2号黑子为search(搜索) 里面分为2个盒子使用伪元素方法插入小竖线放大镜为精灵图技术
3号盒子为search-login(搜索登陆) 放入文字即可

main-content区域

移动端基础之流式布局(一)流式布局之JD

main-content区域分为三个盒子
1号盒子为slider(滑动图) 直接div插入图像即可图像宽度设置为100%
2号盒子为brand(品牌日) 三个div设置浮动 div嵌套a 每个div宽度为33.33% 图像宽度设置为100%’
3号盒子为nav区域放入10个a a里面放入图像即文字即可每个a设置宽度为20%

news区域

移动端基础之流式布局(一)流式布局之JD

news模块由3个div a img组成 div嵌套a a嵌套img即可

footer区域

移动端基础之流式布局(一)流式布局之JD

div嵌套4个a 每个a的宽度为25% a设置css3盒子模型水平居中垂直对齐

效果图

移动端基础之流式布局(一)流式布局之JD

移动端基础之流式布局(一)流式布局之JD

浏览器现状

手机屏幕的现状

常见移动端屏幕尺寸

移动端调试方法

视口

布局视口

视觉视口

理想视口

总结

meta标签

标准的viewport

物理像素与物理像素比

多倍图

背景图

背景多倍图

移动端开发选择

单独制作移动端页面

响应式页面兼移动端

移动端技术解决方案

normalize.css

特殊样式

CSS盒子模型

去除高亮效果

按钮自定义样式

禁止页面长按弹出菜单

移动端技术选型

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

响应式页面兼容移动端

流式布局

图片格式

移动端二倍精灵图

流式布局之JD

项目之前期准备

项目文件夹

设置视口标签及引入normalize.css

body设置样式

header区域

search-wrap区域

main-content区域

news区域

footer区域

效果图

继续阅读