移动端布局

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


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";
})

你可能感兴趣的:(移动端布局)