有关移动端适配的问题
Posted whdaichengxu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有关移动端适配的问题相关的知识,希望对你有一定的参考价值。
移动端适配这一块,
有好多种方案。
viewport + rem:
viewport + vw
js动态设置: 参考文章 http://caibaojian.com/flexible-js.html
一般来说,用下面的这个viewport:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
width=device-width:设置布局视口的大小等于设备独立像素;
initial-scale=1.0:设置布局视口和视觉视口的大小等于设备独立像素;
user-scalable=no:不允许用户进行缩放;
minimum-scale和maximum-scale
分别这只最小的缩放为1.0,最大的缩放为1.0,表示不允许用户进行缩放操作。
但是有几个原则要考虑一下: 字体使用px 限制根元素的大小 使用sass中的function做到单位变换
参考资料:
浅谈移动端三大viewport https://www.cnblogs.com/ssh-007/p/7196748.html
移动端适配问题https://www.kancloud.cn/xiaomingjun/interview/909768
flexible.js 布局详解http://caibaojian.com/flexible-js.html
amfe-flexible https://github.com/amfe/lib-flexible?utm_source=caibaojian.com
以上是关于有关移动端适配的问题的主要内容,如果未能解决你的问题,请参考以下文章