移动端布局

Posted 2020-10-17

页面布局→俗称搭建页面结构（html）和增加页面样式（css）

随着html5和css3的发展，页面布局工作也越来越复杂，但是也可以越来越好看

随着科技发展布局也分为：pc端布局和移动端布局

pc端布局的难点是要兼容每个浏览器→chrome FF IE 6 7 8，最烦人的是ie，具体的问题自己可以百度

移动端不需要兼容每个浏览器，移动端只有一个内核浏览器 -webkit- 但是需要兼容各个尺寸

各个尺寸有很多：
苹果4-8 有320 375 414 等 这些是苹果手机的不同宽度的尺寸
android尺寸 320-640不等，
还有一些其他的国产机 尺寸大的惊人 有1024的尺寸

页面要自适应这些宽度不等的设备，有很多技术，主要介绍弹性布局和rem布局

弹性布局：相当于被父级加一个属性，那么他就相当于一个可以变宽变窄的容器，然后你可以在里边放东西

弹性盒子：
父级：
display:-webkit-box;（父级变成弹性盒子）
子级：
-webkit-box-flex: 1;（自己自己占多少分数，分数具体怎么分百度）

然后是一些属性：
方向：
-webkit-box-orient: vertical;
水平：-> 分宽度
垂直: -> 分高度

排列方式：
-webkit-box-direction: reverse; 倒着排

水平排列：
-webkit-box-pack:center;
垂直排列：
-webkit-box-align: center;
还有让子元素水平居中，垂直居中，水平垂直居中的属性等。

弹性布局也要注意几点：
* 弹性只能加给父级，也就是说你想让那些元素在一起排列就给它的父级加弹性
* 用弹性了，子级就不能浮动，这个要记住后期维护很重要。

定位和弹性不能一起用

还有一点：移动端的页面必须要加上几个meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-
scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

具体为什么加百度，有可能会查出更多的meta标签，不过也是根据具体情况自己加

————————————————————————————————————————————————
rem布局
依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-
size来计算
比如：html{ font-size:16px;} 那么1rem=16px来计算，浏览器默认是16px,转成px比较麻烦所以可以
设置成html{font-size=62.5% 也就是默认10px的字号} 但是浏览器最小是12px,小于12px会做12px来计算所有
可以用js动态来设置
<script type="text/javascript">
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=m(字体大小)*doc.documentElement.clientWidth/n（
设计图宽度）+‘px‘;
}
change();
win.addEventListener=(‘resize‘,change,false);
})(window,document)
</script>

如何在不同尺寸下显示不同的宽高，需要根据设计稿的宽度，如果设计稿是320，可以是字体大小是20，px转换
rem就是px/20

————————————————————————————————————————————————
还有流体布局，等乱七八糟（有时间在说）