移动端布局

视口

1. 布局视口
   把页面压缩到手机屏幕大小
2. 视觉视口
   手机屏幕显示页面的一小部分，其余部分需拖拉屏幕看
3. 理想视口
   根据手机屏幕大小来设计样式
   需要添加meta视口标签

// content属性
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

属性	值	描述
name=“viewport”		理想视口
content="width=device-width		使页面大小与设备一样大
user-scalable=no	yes ，no	用户不可缩放
initial-scale=1.0	1.0	初始缩放比
minimum-scale=1.0	1.0	最小缩放比
maximum-scale=1.0	1.0	最大缩放比

二倍图
pc端的1px = 2个手机物理像素
pc端 一个5050的图，放在手机端为100100的图会模糊
把100的图缩小50再添加到手机上放大为100

特殊样式

移动端开发时一些样式的影响

属性	作用
box-sizing=border-box	设置盒子的固定大小
-webkit-tap-higlight-color : transparent;	点击高亮我们需要清除清除
-webkit-applearance: none;	ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-touch-callout : none	禁止长按页面时的弹出菜单

移动端布局技术

单独制作移动端页面

1. 流式布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受像素的限制，内容向两侧填充
max-width: px;
min-width: px;
2. flex弹性布局
通过父盒子添加flex属性，来控制子盒子的位置和排列的方式
flex布局父项常用属性：

属性	值	描述
flex-direction :	row(x轴左到右), row-reverse(x轴右到左), column(从上到下), column-reverse(从上到下)	设置主轴的方向
justify-content :	flex-start(从左到右)，flex-end(从右到左)，center(主轴居中), space-around(平分剩余空间), space-between(两边贴边，平分其余)	设置主轴上的子元素排列方式
flex-wrap ：	nowrap(不换行) wrap(换行)	设置子元素是否换行
align-items ：	flex-start，flex-end，stretch(向Y轴，子盒子不给高度)，center(水平垂直居中)	设置侧轴上的子元素（单行）排列方式
align-content :	flex-start，flex-end，center，space-around, space-between，stretch	设置侧轴上的子元素（多行）排列方式
flex-flow :	同时设置了 flex-direction和flex-wrap	复合属性

flex布局子项常用属性

属性	描述
align-self	控制子项自己在侧轴上的排列顺序
order	属性定义项目的排序顺序，数值越小，排列越靠前，默认为0

3. less+rem+媒体查询布局
em相对于父元素的字体大小来说的
rem相对于html 元素字体大小来说的
媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式

// 当你重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面
@media mediatype and|not|only （media feature）{  CSS-Code；   }

属性	值
mediatype 媒体类型	all 用于所有设备，print 用于打印机和打印预览，screen 用于电脑屏幕，平板电脑，智能手机
关键字 and not only	and(和多个媒体特征连接在一起“且”)，not (排除某个媒体类型“非”, only (指定某个特定的媒体类型)
media feature 媒体特征	width , min-width , max-width

// 示例  在屏幕上最大的宽度是800px ，设置我们想要的样式
@media screen and (max-width: 800px){ }

媒体查询过程
1.选择一套标准尺寸 750px
2. 用屏幕尺寸 除以 我们划分的份数 得到html里面的文字大小
不同屏幕下得到的文字大小是不一样的
3 .页面元素的rem值 = 页面元素在 750像素的下px值 / html里面的文字大小

媒体查询 + rem实现元素动态大小变化
根据媒体查询页面不同大小给html设置font-size=大小，
1rem = 设置的大小

flexible.js + rem
flexible.js 代替媒体查询
使用flexible.js 文件自动设置rem相对屏幕适配大小

响应式页面兼容移动端

响应式开发的原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置

设备	屏幕大小
超小屏幕	宽度设置为100%
小屏设备	宽度为750px
平板	>=768px
中等屏幕	宽度为970px
桌面显示器	>=992px
宽屏设备	宽度为1170px
大桌面显示器	>=1200px