移动端基础
调试方法
- 浏览器模拟手机调试
- 搭建本地服务器，手机和服务器在一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
视口
视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口。
布局视口
一般移动设备浏览器默认设置的布局视口，用于解决早期pc端网页在手机上显示的问题。但元素看上去很小，一般可通过手动缩放网页。
视觉视口
指用户正在看到的网站区域，可以通过缩放操作视觉视口，但不会影响布局视口。
理想视口
为了网站在移动端有理想的浏览和阅读宽度而设定，需要手动添加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）
二倍图
物理像素
物理像素是指屏幕最小颗粒，是物理真实存在的。是厂商设置好的，即分辨率。
开发时使用的px与物理像素在pc端是对应的，但在移动端不同。
物理像素比
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
二倍图
准备分辨率更大的图片，然后手动缩小为需要的尺寸。这样可以避免移动端自动放大后的模糊问题。
背景缩放
background-size：规定背景图像的尺寸（可以是长度和百分比，cover表示将背景图扩展至完全覆盖背景区域，contain表示将背景图扩展至宽或高完全适应内容区域）
移动端开发选择
主流方案
单独制作移动端页面
通常情况下，网址域名前加“m”可以打开移动端。通过判断设备打开不同页面。
响应式页面兼容移动端
根据页面大小调整布局，制作比较麻烦。
特殊样式
清除点击高亮的效果
-webkit-tap-highlight-color:transparent;
去掉默认外观样式
-webkit-appearance: none;
禁用长按页面时弹出菜单
-webkit-touch-callout: none;
移动端页面布局
流式布局（百分比布局）
通过设置盒子宽度为百分比来根据屏幕宽度来进行伸缩，内容向两侧填充
max-width（height）：最大宽度（高度）
min-width（height）：最小宽度（高度）
flex布局（弹性布局）
操作方便，应用广泛。
原理：给父盒子设置flex属性，来控制子盒子的位置和排列方式。
特性：
任何一个容器都可以指定为flex布局。当父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效。
常见父项属性：
flex-direction：设置主轴方向
子元素按照主轴排列。
默认主轴方向为x轴，水平向右；
默认侧轴方向为y轴，垂直向下；
属性值：
row：默认值，从左到右；
row-reverse：从右到左；
column：从上到下；
column-reverse：从下到上。
justify-content：设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确定好主轴
属性值：
flex-start：默认值，从头部开始；
flex-end：从尾部开始；
center：在主轴居中对齐；
space-around：平分剩余空间；
space-between：先两边贴边，再平分剩余空间。
space-evenly：flex 元素之间和 flex 元素和容器的空间总是相等的。
flex-wrap：设置子元素是否换行
nowrap：默认不换行，放不下盒子会自动缩小
wrap：换行
align-items：设置侧轴上的子元素排列方式（单行）
默认侧轴为垂直向下时：
flex-start：从上到下；
flex-end：从下到上；
center：挤在一起居中；
stretch：拉伸（默认值），但子盒子给了高度不会生效。
align-content：设置侧轴上的子元素排列方式（多行）
注意单行时没有效果
属性值：
flex-start：默认值，从头部开始；
flex-end：从尾部开始；
center：在侧轴居中显示；
space-around：平分剩余空间；
space-between：先两边贴边，再平分剩余空间。
stretch：设置子项元素高度平分父元素高度。
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
常见子项属性：
flex
flex属性定义子项目分配剩余空间，用flex表示占多少份数。也可以写为百分比（相对于父级盒子）
.item {
flex:<number>;/*default 0*/
}
flex-grown
align-self
控制子项自己在侧轴上的排列方式。默认为auto，表示继承父元素的align-items属性，若没有父元素，则等同于stretch。
order
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
grid布局
容器属性
给容器指定为grid布局，将其指定为网格容器。
grid-template-columns属性设置列宽，grid-template-rows属性设置行高
fr：表示网格容器中可用空间的一份。
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格的垂直位置（上中下）。
项目属性
grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items属性的用法完全一致，但只作用于单个项目
align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
rem适配布局
rem单位
rem是一个相对单位，相对于html元素的字体大小。
媒体查询
针对不同屏幕尺寸调整不同样式。
语法：
@media mediatype and|not|only (media feature){
css-code;
}
mediatype：查询类型，all用于所有设备，print用于打印机和打印预览，scree用于电脑屏幕、平板电脑、智能手机等。
and|not|only：and将多个媒体特性连接到一起，相当于“且”；not排除某个媒体类型，相当于“非”；only指定某个特定媒体类型。
media feature：媒体特性，width指定输出设备中页面可见区域的宽度，min-width指定输出设备中页面最小可见区域的宽度，max-width指定输出设备中页面最大可见区域的宽度
