- 固定布局
- 在＜head＞里把viewport加好，跟pc端一样，设想整个网页的宽度为750px居中即可， 超出部分留白。
- 优点：思路沿用PC端，上手简单。
- 缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差。
- 流式布局
- 流动布局重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一 样，优点是流式布局可以很好解决自适应需求
- 缺点：通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
响应式做法
- 根据目标用户的访问设备的主要类型做三种或四种布局。
- 每种布局有一个区间即可利用媒体查询@media,可以为不同分辨率的设备加载不同的样式。这种方法的优点是可以相对精确的控制显示效果。
- 缺点：可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难
- 媒体查询 Media
<style>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 60px;
background-color: red;
}
/* 媒体查询 小于1200px 生效 */
/*
响应式布局缺点：
1.重复代码太多，修改维护麻烦
2.只能在临界值改变样式，局限性比较大
*/
@media screen and (max-width: 1200px) {
.header {
height: 55px;
}
}
@media screen and (max-width: 992px) {
.header {
height: 50px;
}
}
@media screen and (max-width: 768px) {
.header {
height: 45px;
}
}
</style>- rem 布局
- rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。 比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px
<script>
// 设置一个函数
function auto() {
// 声明一个变量 deviceWidth = 当前屏幕的宽度
var deviceWidth = document.documentElement.clientWidth
// 在控制台打印
// console.log(deviceWidth)
// 设计图限制宽度
if (deviceWidth > 375) {
deviceWidth =375
}
// 算出当前屏幕宽度的font-size 值
var fs = (deviceWidth / 375) * 100
console.log(fs)
// 赋值给根元素
document.documentElement.style.fontSize = fs + 'px'
}
auto()
// 当屏幕宽度改变的时候我自动变化html字体大小值
window.onresize = function () {
auto()
}
</script>vw + vh
- vw 即 Viewport’s width 的简写，是 CSS3 规范中的视口单位，相对于视口的宽度，视口被均分为 100 单位的 vw, 相对于视口的高度，视口被均分为 100 单位的 vh。
- 750px设计稿 750px=100vw 1px = 0.1333333vw;
- 如果使用rem 预设1rem = 100px 100px就是 13.333333vw 由此vw和rem 就可以进行换算了
<style>
html {
/*
100vw = 750px
1px = 0.133333333vw
1rem = 100px
1rem = 13.333333vw
*/
font-size: 13.333333vw;
}
.box {
width: 3rem;
height: 3rem;
background-color: red;
}
</style>总结：移动端适配建议由rem为主，百分比适配、vw/vh适配为辅的方案。
vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。这也是rem适配主流的原因。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
