一、移动端视口
- 视口(viewport)：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视
口和理想视口。我们要最终使用的是理想视口。 - 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的 PC 端页面在手机上显示的问题。
- iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
- 现在市场常见的移动端web页面通常有两种，单独制作移动端页面和响应式页面两种方案。主流还是PC和移动端各自单独制作一套页面。
image.png
image.png
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
image.png
二、响应式布局ui，非主流，一般按公司需要开发
响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/
缺点:制作麻烦，需要花很大精力去调兼容性问题
image.png
image.png
- 设置根布局的font-Size ，优点是可以根据设计稿尺寸宽度合理设置DESIGN_WIDTH进行比较完美的适配
; (function (doc, win) {
if (doc==null||!doc.addEventListener) {
return;
}
// 适配rem的js代码函数，适用于移动web开发界面比例适配
var supportsOrientationChange = "onorientationchange" in win ? "orientationchange" : "resize";
var timeoutId;
function setRem() {
//设备宽度限制常量，用于适配最大宽度
const MAX_CLIENT_WIDTH = 750;
//设计稿的宽度为375px，不同设计稿修改这个值
const DESIGN_WIDTH = 375;
//也可以乘以其他值如50，但是为了好计算，一般设置为10或100，这样，
//我们只需要把设计稿宽度如 width=50px，除以10或100，改为5rem或0.5rem就好了。
const UI_REM = 100;
//获取并调整设备宽度
var clWidth = doc.documentElement.clientWidth;
if (clWidth > MAX_CLIENT_WIDTH) {
doc.documentElement.style.fontSize = "100px";
} else {
clWidth = clWidth >= MAX_CLIENT_WIDTH ? MAX_CLIENT_WIDTH : clWidth;
console.log("clientWidth=" + clWidth);
//最后设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，那么 1rem = 100px
const fontPX = (clWidth / DESIGN_WIDTH) * UI_REM;
doc.documentElement.style.fontSize = fontPX + "px";
}
}
console.log("初始化设置rem，" + supportsOrientationChange);
setRem();//设置rem
//supportsOrientationChange 变量用于判断浏览器是否支持 orientationchange 事件，如果支持，
//则使用该事件进行窗口大小的监听，否则使用 resize 事件
win.addEventListener(supportsOrientationChange, function () {
try {
console.log("监听到变化");
// 防抖延迟时间，节流函数，防止页面频繁刷新
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
setRem();
}, 300)
} catch (error) {
console.log(error)
}
}, false)
}(document, window))
- 淘宝无限适配flexible.js源码设置font-Size
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
pc.png
平板.png
手机.png
三、适配
- 1.设置meta标签配置
- 2.CSS初始化
- 3.设置根布局的font-Size，使用rem单位
-
4.页面上的单位尽量用rem和百分比
image.png
image.png
image.png
个人H5开源项目：WanAndroidWeb
https://gitee.com/muxibobo/WanAndroidWeb
https://github.com/muxibobo/WanAndroidWeb
