移动端布局

第一：百分比布局
第二：弹性盒子
第三：相对单位
移动端适配

image.png

百分比 布局一
根据父节点的大小来计算 : %
练习: 1：制作基本布局，
2：制作响应式图片

• 111


• 22

效果图

image.png

弹性盒子 布局二

image.png

image.png

css3弹性盒子
看看效果图

image.png

image.png

注意：在你使用弹性盒子模型之前，你必须先把父元素display属性设置为box或inline-box后，该元素才具有弹性盒子模型。
盒子的布局方向box-orient属性

image.png

盒子的布局顺序box-direction属性

image.png

box-ordinal-group属性

image.png

box-flex属性

image.png

box-pack / box-align属性取值

image.png

移动端rem布局三

image.png

设置根元素
Javascript设置html元素
window.addEventListener("resize",function(){
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/10+"px";
})