1.移动端视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

标签中 name="viewport" 表示：视口标签属性

content是规则属性：其中规则意思如下

????????width=device-width ：表示宽度是设备屏幕的宽度?

????????initial-scale=1.0：表示初始的缩放比例

????????minimum-scale=1.0：表示最小的缩放比例

????????maximum-scale=1.0：表示最大的缩放比例

????????user-scalable=no：表示用户是否可以调整缩放比例

2.移动端常用单位：px / % / em /rem / vw / vh* /

? ? ? ? 1.px:像素单位

? ? ? ? 2.%:百分比布局单位

? ? ? ? 3.em:

????????????????1em = 1 * font-size, ????????????????5em = 5 * font-size ????????????????如果自身有 font-size 的话以自身为准，如果自身 font-size 就是以 em 为单位或者没有 font-size 的话，就会从父容器继承。 ????????????????em 不经常使用，但是有时也会比较好用，如：字符缩进。

? ? ? ? 4.rem

????????????????rem 是 root 根元素的 font-size ，即 html 元素的 font-size。

????????????????假设，640px 的设备 1 rem = 100px，等比缩放的公式为：

????????????????1 rem = document.clientWidth / 640 * 100px;

? ? ? ? 5.vw

????????????????vw 表示视口宽度，1vw 表示视口宽度的 1%。

? ? ? ? 6.vh

????????????????vh表示视口高度，1vh表示视口高度的 1%。

3.移动端适配

? ? ? ? 前提条件;移动端就是手机端，因为手机有很多种，屏幕大小有很多种，这时候就需要写的移动端页面能适应所有屏幕大小。

? ? ? ? 适配方案：

移动端适配方案有很多种，因为复杂就不做过多解释，这里直接放我已经适配好的代码方便大家使用

(function(win) { var docEl = win.document.documentElement; var time; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width > 768) { // 最大宽度 width = 768; } var rem = width / 375*100; docEl.style.fontSize = rem + 'px'; ///rem用font-size:100px来进行换算 } win.addEventListener('resize', function() { clearTimeout(time); time = setTimeout(refreshRem, 1); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(time); time = setTimeout(refreshRem, 1); } }, false); refreshRem(); })(window)

只需要讲此代码引入所用页面，就完成移动端适配，此js? 1rem=100px? ? ? ??

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。