前端学习笔记—移动端web开发 - 成就云开发者社区

一、移动端视口

视口(viewport)：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。我们要最终使用的是理想视口。
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的 PC 端页面在手机上显示的问题。
iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
现在市场常见的移动端web页面通常有两种，单独制作移动端页面和响应式页面两种方案。主流还是PC和移动端各自单独制作一套页面。

代码语言：javascript

复制

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

二、响应式布局ui，非主流，一般按公司需要开发

响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/

缺点:制作麻烦，需要花很大精力去调兼容性问题

设置根布局的font-Size ，优点是可以根据设计稿尺寸宽度合理设置DESIGN_WIDTH进行比较完美的适配

代码语言：javascript

复制

; (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 &gt; MAX_CLIENT_WIDTH) {
        doc.documentElement.style.fontSize = &#34;100px&#34;;
    } else {
        clWidth = clWidth &gt;= MAX_CLIENT_WIDTH ? MAX_CLIENT_WIDTH : clWidth;

        console.log(&#34;clientWidth=&#34; + clWidth);

        //最后设置html的 font-size= 移动设备 / 设计稿宽度 * 100  = 100px，那么 1rem = 100px
        const fontPX = (clWidth / DESIGN_WIDTH) * UI_REM;
        doc.documentElement.style.fontSize = fontPX + &#34;px&#34;;
    }
}
console.log(&#34;初始化设置rem，&#34; + supportsOrientationChange);
setRem();//设置rem

//supportsOrientationChange 变量用于判断浏览器是否支持 orientationchange 事件，如果支持，
//则使用该事件进行窗口大小的监听，否则使用 resize 事件
win.addEventListener(supportsOrientationChange, function () {
    try {
        console.log(&#34;监听到变化&#34;);
        // 防抖延迟时间，节流函数，防止页面频繁刷新
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() =&gt; {
            setRem();
        }, 300)
    } catch (error) {
        console.log(error)
    }
}, false)

}(document, window))

淘宝无限适配flexible.js源码设置font-Size

代码语言：javascript

复制

(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和百分比