浏览器私有前缀
为了兼容老版本
私有前缀
-moz- : fixfox 浏览器私有属性-ms- : ie浏览器私有属性-webkit- : safari、chrome私有属性-o- ： Opera私有属性
提倡写法
-moz-border-radius ：10px；
-ms-border-radius ：10px；
-webkit-border-radius ：10px；
-o-border-radius ：10px；
分割线-----------------------------------------------------------
移动端基础
国内的移动端浏览器是根据webkit修改的内核，兼容移动端主流浏览器，处理webkit内核浏览器即可。
手机屏幕大小不同，分辨率不同；不用关注分辨率
移动端调试方法
chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器。使用外网服务器，访问IP或者域名访问。
视口
视口：就是浏览器显示页面内容的屏幕区域。
视口可分为布局视口、视觉视口和理想视口
布局视口 layout viewport
iOS、Android基本上将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只是元素看上去很小，可以通过手动缩放页面。
视觉视口 visual viewport
用户能看到的区域，网站的区域
理想视口 ideal viewport
网站在移动端最理想的浏览和阅读宽度而设定。
需要手动添加meta视口标签通知浏览器操作。
meta视口标签
属性 ： 解释说明
width ： 设置viewport宽度，可以设置为device-width特殊值
initial-scale ：初始缩放比，大于0的数字
maximum-scale：最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）
标准viewport设置
视口宽度和设备保持一致视口缩放比默认1.0不允许用户自行缩放最大允许的缩放比例1.0最小允许的缩放比例1.0
二倍图
物理像素：屏幕显示的最小颗粒，是物理真实存在的（分辨率）。
开发时候的1px不是一定等于1个物理像素。
pc端1px=1个物理像素，移动端不尽相同。
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
背景缩放 background-size
规定背景图像尺寸：
background-size：图像宽度 图像高度；
只写一个参数，就是宽度，高度等比例缩放。单位可以用%，先对于父盒子cover 要完全覆盖父盒子，可能有部分背景图片显示不全contain 高度、宽度等比例拉伸，图像扩展至最大尺寸，有一个铺满盒子就不再拉伸了，可能有部分空白区域。
移动端开发选择
移动端主流方案
1.单独制作移动端页面（主流）
网址域名前加m（mobile）可以打开手机端页面
2.响应式兼容PC移动端
通过屏幕宽度来改变样式，以适应不同终端
缺点：制作麻烦，需要花费大量时间去调兼容性问题。
移动端技术解决方案
移动端css初始化推荐 normalize.css
css3 盒子模型 box-sizing：border-box；//盒子不会被撑大。
移动端可以全部用Css3；pc端要考虑兼容就用传统模式。
移动端链接清除点击高亮：-webkit-tap-highlight-color：transparent；
移动端按钮清除外观亮光效果：-webkit-appearance：none；
移动端禁止长按页面时弹出菜单： img，a{-webkit-touch-callout：none；}
移动端常见布局-流式布局
流式布局1、又称“百分比布局”，也称非固定像素布局。
2、通过把盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。
3、是移动开发比较常见的布局
4、添加最大值和最小值保证页面内容
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）
案例:京东移动端首页
方案：单独制作移动页面方案
技术：布局采用 流式布局
引入css初始化
图片和文字要写vertical-align:middle。
flex布局
pc端浏览器支持情况较差
flex布局原理:
弹性布局,任何容器都可以指定为flex布局
将父盒子设置为flex布局后,子元素的float、clear和vertical-align属性将失效。flex布局又称为 =伸缩布局=弹性布局=伸缩盒布局=弹性盒布局采用flex布局的元素成为flex容器，简称“容器”。他的所有子元素自动成为容器成员，成为flex项目，简称“项目”。
通过给父元素添加flex属性，来控制子盒子的位置和排列方式。
flex布局父项属性
flex-direction 设置主轴方向
flex布局中分为主轴和侧轴两个方向，等同于行和列、x轴和y轴。
默认主轴方向就是x轴方向，水平向右默认侧轴方向就是y轴方向，垂直向下
flex默认主轴是x轴 row，那y轴就是侧轴，元素沿着主轴排列；主轴是可以变化的，看flex-direction设置谁为主轴。
justify-content 设置主轴上的子元素排列方式
justify-content 定义了子元素在主轴上的对齐方式；使用这个属性之前一定要确定好主轴是哪一个。
flex-wrap 子元素是否换行
flex布局中默认的子元素是不换行的，如果装不下会缩小子元素的宽度放到父元素里。
align-items 设置侧轴上的子元素排列方式（单行）
**align-content 设置侧轴上的子元素排列方式（多行） **
align-content 适用于换行（多行）的情况下，单行情况无效；单行找align-items，多行找align-content。
flex-flow 复合属性
flex-direction：row；
flex-warp：wrap；
简写：
flex-flow：row wrap；//以x轴为主轴，换行
flex布局 子项属性
flex属性
flex属性 定义子项目分配剩余空间，用flex来表示占多少份数。
.item{flex:<number>; //default 0}
align-self 控制子盒子在侧轴上的排列方式
span:nth-child(2){align-self: flex-end; //设置span里的第二个子盒子在侧轴上的排列方式}
order 属性定义项目的排列顺序
默认是0 ，-1比0小，所以可以排在前面，数值越小越靠前。
span:nth-child(2){order: -1;}
这样span里的第二个子盒子就会排在最前面。
案例-携程网首页
之前的携程网首页,找不到图片资源,用其他图片代替,部分精灵图缺少,留有空白.
首页index代码
<html><head><meta charset="utf-8"><title>携程网移动端首页</title><!-- 设置移动端 视口标签 --><meta name="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"><!-- 引入初始化样式和首页样式 --><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"></head><body><!-- 顶部搜索 --><div class="search-index"><div class="search">搜索:目的地/景点/酒店/机票</div><a href="#" class="main">我的</a></div><!-- 焦点图模块focus --><div class="focus"><img src="upload/slider.jpg" alt=""></div><!-- 局部导航栏模块 --><ul class="local-nav"><li><a href="#" title="景点玩乐"><span class="local-nav-icon"></span><span>景点玩乐</span></a></li><li><a href="#"><span class="local-nav-icon"></span><span>机票</span></a></li><li><a href="#"><span class="local-nav-icon"></span><span>景点玩乐</span></a></li><li><a href="#"><span class="local-nav-icon"></span><span>景点玩乐</span></a></li><li><a href="#"><span class="local-nav-icon"></span><span>景点玩乐</span></a></li></ul><!-- nav主模块 --><nav><div class="nav-common"><div class="nav-items"><a href="">1</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="">1</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="">1</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div><div class="nav-items"><a href="">海外酒店</a><a href="">海外酒店</a></div></div></nav><!-- subnav模块 还是用ul搭建--><ul class="subnav"><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li><li><a href="#"><span class="subnav-icon"></span><span>电话卡</span></a></li></ul><!-- 销售模块sales-box --><div class="sales-box"><div class="sales-hd"><h2>热门搜索</h2> <!-- 放图片 --><a href="#" class="more">获取更多福利</a></div><div class="sales-bd"><div class="row"><a href="#"><img src="../ctrip(携程)/upload/row1.jpg" alt=""></a><a href="#"><img src="../ctrip(携程)/upload/row2.webp.jpg" alt=""></a></div><div class="row">2</div><div class="row">3</div></div></div></body></html>
css样式 代码:
* {margin: 0;padding: 0;box-sizing: border-box;}a {text-decoration: none;}li {list-style: none;}/* 设置body大小 */body {max-width: 540px;min-width: 320px;margin: 0 auto;color: #000;background-color: #f4f4f4;/* overflow-x: hidden; */height: 3000px;}/* 搜索模块 */.search-index {display: flex;/* 固定定位 */position: fixed;top: 0;left: 50%;/* 不设置left值可以居中,如果要设置left值一定要设置居中代码 */-webkit-transform: translateX(-50%);/* 考虑兼容性问题 */transform: translateX(-50%);width: 100%;/* 固定定位要有宽度 */height: 44px;max-width: 540px;min-width: 320px;background-color: #f6f6f6;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}.search {position: relative;flex: 1;height: 26px;line-height: 24px;font-size: 12px;color: #666;padding-left: 25px;border: 1px solid #ccc;margin: 6px 10px;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);}.search::before {content: '';/* display: block; */position: absolute;/* 加了绝对定位的盒子可以直接有大小 */top: 2px;left: 3px;width: 22px;height: 20px;background: url(../images/tabbar.png) no-repeat -1px -75px;background-size: 24px auto;}.main {/* 因为要用flex布局,所以不用转换为块级元素 */display: block;width: 44px;height: 44px;text-align: center;font-size: 12px;color: blue;}.main::before {content: '';display: block;/* 1.精灵图等比例缩放为原来的一半大小24*120 2.量图片大小24*24 3.量出图片坐标0 ,150*/width: 22px;height: 20px;margin-left: 10px;background: url(../images/tabbar.png) no-repeat -1px -75px;background-size: 24px auto;margin: 3px 10px -2px;}.focus {padding-top: 44px;}.focus img {width: 100%;}.local-nav {display: flex;height: 64px;margin: 3px 3px;background-color: #fff;border-radius: 10px;}.local-nav li {flex: 1;}.local-nav li a {display: flex;/* 把主轴改为y轴 */flex-direction: column;/* 再让侧轴x轴居中排列 */align-items: center;margin-top: 5px;}.local-nav-icon {width: 32px;height: 32px;background-color: pink;/* 插入精灵图 因为在携程上找到是单独图片,所以使用单独的图 */background: url("../images/hotel.png") no-repeat;background-size: 32px 32px;background-color: #ccc;}.local-nav li a span {font-size: 12px;color: #000;}.local-nav li:nth-child(2) .local-nav-icon {background: url("../images/flight.png") no-repeat;background-size: 32px 32px;background-color: #ccc;}}/* nav部分 */nav {overflow: hidden;border-radius: 8px;margin: 0 3px 3px;}.nav-common {display: flex;border-radius: 8px;height: 88px;}.nav-common .nav-items {flex: 1;display: flex;flex-direction: column;}.nav-items a {flex: 1;text-align: center;line-height: 44px;color: #fff;text-shadow: 0 2px 3px rgba(0, 0, 0, .3);}.nav-items a:nth-child(1) {border-bottom: 1px solid #fff;}/* 第一个盒子里面没有边框 */.nav-items:nth-child(1) a {border: 0;/* 插入图片 */}/* 给前面两个盒子添加边框 -n+2 */.nav-common .nav-items:nth-child(-n+2) {border-right: 1px solid #fff;}.nav-common:nth-child(1) {background: -webkit-linear-gradient(left, #FA5A55, #fa994d);}.nav-common:nth-child(2) {margin: 2px 0;/* linear-gradient背景渐变必须要添加浏览器私有前缀-webkit- ;left起始位置,默认是从上往下的*/background: -webkit-linear-gradient(left, #06F, #0CF);}.nav-common:nth-child(3) {background: -webkit-linear-gradient(left, #0c9, #0FC);}/* subnav 侧边导航模块 */.subnav {display: flex;flex-wrap: wrap;border: 1px solid #ccc;border-radius: 8px;margin: 2px 2px;}.subnav li {flex: 20%;/* 占比可以用百分数表示 */}.subnav li a {display: flex;flex-direction: column;align-items: center;margin: 2px 0;}.subnav li a span {font-size: 12px;color: #555;}.subnav-icon {width: 25px;height: 22px;background: url(../images/tabbar.png) no-repeat 0 -25px;background-size: 24px auto;}/* 新产品销售模块 */.sales-box {/* 有个上边框 上下左右有个margin值 */border-top: 1px solid #ccc;margin: 3px;}.sales-hd {position: relative;height: 44px;border-bottom: 1px solid #ccc;}.sales-hd h2 {position: relative;text-indent: -999px;overflow: hidden;}.sales-hd h2::after {content: '';position: absolute;top: 13px;left: 14px;width: 79px;height: 15px;background-color: pink;/* 缺少精灵图素材,所以没有添加 */}.sales-hd .more {position: absolute;top: 10px;right: 8px;background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;}/* 用伪元素来写三角 */.sales-hd .more::after {content: '';position: absolute;top: 8px;right: 9px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);/* 让盒子旋转45度就是三角了 */}.row{display: flex;/* height: 50px; */}.row a {flex: 1;}.row a img {width: 100%;}
