分析网易移动端布局实例方案-html教程-PHP中文网

首页

web前端

html教程

分析网易移动端布局实例方案

高洛峰

Mar 26, 2017 am 10:36 AM

移动端布局：

rem方案：页面中的任何元素都采用rem布局，包括字体。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                width: 7.5rem;
                font-size: 32px;
                font-size: .32rem;
                max-width: 1080px;
                margin: 0 auto;
                background: #f6f6f6;
                font-family: &#39;STHeiti&#39;, &#39;Microsoft YaHei&#39;, Helvetica, Arial, sans-serif;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
        </style>
    </head>

    <body>
        <script type="text/javascript">
            var Dpr = 1,
                uAgent = window.navigator.userAgent;
            var isIOS = uAgent.match(/iphone/i);
            var isYIXIN = uAgent.match(/yixin/i);
            var is2345 = uAgent.match(/Mb2345/i);
            var ishaosou = uAgent.match(/mso_app/i);
            var isSogou = uAgent.match(/sogoumobilebrowser/ig);
            var isLiebao = uAgent.match(/liebaofast/i);
            var isGnbr = uAgent.match(/GNBR/i);

            function resizeRoot() {
                var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width :
                    window.innerWidth : window.innerWidth,
                    wDpr, wFsize;
                var wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ?
                    screen.height : window.innerHeight : window.innerHeight;
                if(window.devicePixelRatio) {
                    wDpr = window.devicePixelRatio;
                } else {
                    wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1;
                }
                if(isIOS) {
                    wWidth = screen.width;
                    wHeight = screen.height;
                }
                if(wWidth > wHeight) {
                    wWidth = wHeight;
                }
                wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
                wFsize = wFsize > 32 ? wFsize : 32;
                window.screenWidth_ = wWidth;
                if(isYIXIN || is2345 || ishaosou || isSogou || isLiebao || isGnbr) { //YIXIN 和 2345 这里有个刚调用系统浏览器时候的bug，需要一点延迟来获取
                    setTimeout(function() {
                        wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ?
                            screen.width : window.innerWidth : window.innerWidth;
                        wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight ==
                            0) ? screen.height : window.innerHeight : window.innerHeight;
                        wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
                        wFsize = wFsize > 32 ? wFsize : 32;
                        document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = wFsize + &#39;px&#39;;
                        document.getElementById("fixed").style.display = "none";
                    }, 500);
                } else {
                    document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = wFsize + &#39;px&#39;;
                    document.getElementById("fixed").style.display = "none";
                }
            }
            resizeRoot();
        </script>
    </body>

</html>

html的font-size大小是根据移动设备自动计算的。

设计师完成的设计稿宽度为：750px，此时html跟节点的大小是50px，其他元素根据这个基准值设置rem大小。

分析网易移动端布局实例方案

页面上html的font-size不是预先通过媒介查询在css里定义好的，而是通过js计算出来的，如上述代码中的js代码部分就是计算html的font-size的大小。

以上是分析网易移动端布局实例方案的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser