对于移动端设备，通常就是解决不同设备的显示问题，总结常见布局的优缺点
- 流式布局
- 响应式布局
- rem适配
在移动端的设备，需要进行视口的设置(类似于 浏览器-包含一个视口-包含我们看到的页面dom)，要最先解读到css属性所以一般放在头部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
....
</html>
- 其中width,视口的宽度自动跟随设备调整，
- inital-scale是初始化缩放级别，用户看到的和在pc端的是1:1的关系，（不会因为整体缩小，而导致字体过小无法看到）
- user-scalable是用户是否可以自动缩放 1 yes 或者 0 no
流式布局
流式布局的原理就是利用width:100%已达到解决响应式的问题，在这种设计基础上，一定要注意
- 使用边框盒子（防止溢出）
box-sizing: border-box - 宽度尽量使用
width: 100%
比较简单，使用浏览器自适应宽度，达到自适应的效果，要注意由于使用border-box所以在设置的时候，要尽量设置爱元素的padding,防止元素溢出
- 双飞翼布局
- 两栏布局
有一款插件，是为了解决局部元素的滑动，可以使用iscroll.js,当其元素有超出的长度的时候，可以在局部进行滑动，iscroll,局部滑动
响应式布局
响应式布局主要通过媒体查询来判断当前容器的宽度之类，在执行相应的css代码
- css媒体查询
@media screen and (max-width: 768px)最大宽度为768px时执行的代码
css代码
*{
margin: 0;
padding: 0;
}
.contain{
width: 1000px;
height: 1000px;
margin: 0 auto
最低0.47元/天 解锁文章
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
