分析网易移动端布局实例方案-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

热AI工具

热工具

热门话题

Java教程

1663

CakePHP 教程

1420

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

显示更多

Related knowledge

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML，CSS和JavaScript：Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题