移动端H5页面适配

最新推荐文章于 2024-05-22 18:00:57 发布
最新推荐文章于 2024-05-22 18:00:57 发布
阅读量495 收藏 1
点赞数
分类专栏： 移动端 前端技巧 前端例子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35181466/article/details/106917810
版权

废话不多说，直接上代码

以下例子均以UI设计图为750px宽度作为标准进行转换

1.rem加js适配（用原生方法获取用户设置的浏览器的字体大小(兼容ie)）

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>rem加js适配</title>
    <script>
        (function (doc, win) {
            //      用原生方法获取用户设置的浏览器的字体大小(兼容ie)
            if (doc.documentElement.currentStyle) {
                var user_webset_font = doc.documentElement.currentStyle['fontSize'];
            }
            else {
                var user_webset_font = getComputedStyle(doc.documentElement, false)['fontSize'];
            }
            //      取整后与默认16px的比例系数
            var xs = parseFloat(user_webset_font) / 16;
            //      设置rem的js设置的字体大小
            var view_jsset_font, result_font;
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                clientWidth,
                recalc = function () {
                    clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (!doc.addEventListener) return;
                    if (clientWidth < 750) {
                        //              设置rem的js设置的字体大小
                        view_jsset_font = 100 * (clientWidth / 750);
                        //              最终的字体大小为rem字体/系数
                        result_font = view_jsset_font / xs;
                        //              设置根字体大小
                        docEl.style.fontSize = result_font + 'px';
                    }
                    else {
                        docEl.style.fontSize = 100 + 'px';
                    }
                };
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .main {
            max-width: 750px;
            margin: 0 auto;
        }

        .imgs {
            width: 7.5rem;
            height: 5rem;
            margin: 0 auto;
        }

        .title {
            font-size: .32rem;
            padding: 0 .28rem;
        }

        .main p {
            font-size: .28rem;
            padding: .2rem .28rem;
        }
    </style>
</head>

<body>
    <div class="main">
        <img class="imgs" src="img/01.jpg" />
        <h2 class="title">Re-S医院妇产科专门医院</h2>
        <p>Re-S医院妇产科专门医院，位于江南区，历经20多年的发展，致力于打造为女性幸福与健康的女性专门诊疗中
            心。该医院初期主要研究女性性反应方面问题，后逐渐将女性盆骨健康问题和如何提高性功能也作为院内主要诊疗项目。医院凭借精湛的手术技术和出色的手术效果，在阴道紧缩术方面不仅是在韩国，世界授予了关于性功能向上的医学论文。还逐渐走向了世界舞台。
        </p>
        <p>通过专业、科学的妇科手术，女性的性生活持续到即使是闭经后的80多岁是有可能的。积累多年的阴道整形手术经验，为女性朋友的社会生活和两性生活中能起到极大的帮助。</p>
    </div>
</body>

</html>

2.rem加js适配（简单的）

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>rem加js适配</title>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth || 375;
                    var width = (clientWidth <= 320) ? 320 : ((clientWidth >= 750) ? 750 : clientWidth);
                    var fontSize = 100 * (width / 750);
                    docEl.style.fontSize = fontSize + 'px'
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            recalc()
        })(document, window);
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .main {
            max-width: 750px;
            margin: 0 auto;
        }

        .imgs {
            width: 7.5rem;
            height: 5rem;
            margin: 0 auto;
        }

        .title {
            font-size: .32rem;
            padding: 0 .28rem;
        }

        .main p {
            font-size: .28rem;
            padding: .2rem .28rem;
        }
    </style>
</head>

<body>
    <div class="main">
        <img class="imgs" src="img/01.jpg" />
        <h2 class="title">Re-S医院妇产科专门医院</h2>
        <p>Re-S医院妇产科专门医院，位于江南区，历经20多年的发展，致力于打造为女性幸福与健康的女性专门诊疗中
            心。该医院初期主要研究女性性反应方面问题，后逐渐将女性盆骨健康问题和如何提高性功能也作为院内主要诊疗项目。医院凭借精湛的手术技术和出色的手术效果，在阴道紧缩术方面不仅是在韩国，世界授予了关于性功能向上的医学论文。还逐渐走向了世界舞台。
        </p>
        <p>通过专业、科学的妇科手术，女性的性生活持续到即使是闭经后的80多岁是有可能的。积累多年的阴道整形手术经验，为女性朋友的社会生活和两性生活中能起到极大的帮助。</p>
    </div>
</body>

</html>

3.rem加vw适配

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>rem加vw适配 </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            font-size: 13.33333333vw
        }

        .main {
            max-width: 7.5rem;
            margin: 0 auto;
            overflow: hidden;
        }

        .imgs {
            width: 7.5rem;
            height: 5rem;
            margin: 0 auto;
        }

        .title {
            font-size: .32rem;
            padding: 0 .28rem;
        }

        .main p {
            font-size: .28rem;
            padding: .2rem .28rem;
        }
    </style>
</head>

<body>
    <div class="main">
        <img class="imgs" src="img/01.jpg" />
        <h2 class="title">Re-S医院妇产科专门医院</h2>
        <p>Re-S医院妇产科专门医院，位于江南区，历经20多年的发展，致力于打造为女性幸福与健康的女性专门诊疗中
            心。该医院初期主要研究女性性反应方面问题，后逐渐将女性盆骨健康问题和如何提高性功能也作为院内主要诊疗项目。医院凭借精湛的手术技术和出色的手术效果，在阴道紧缩术方面不仅是在韩国，世界授予了关于性功能向上的医学论文。还逐渐走向了世界舞台。
        </p>
        <p>通过专业、科学的妇科手术，女性的性生活持续到即使是闭经后的80多岁是有可能的。积累多年的阴道整形手术经验，为女性朋友的社会生活和两性生活中能起到极大的帮助。</p>
    </div>
</body>

</html>

 

theOtherSky
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5移动端的完美适配
08-10
未来肯定是移动端的天下，接下来谈谈h5移动端的布局问题，目前有三种 1、百分比布局 ----->有点兼容性好，缺点布局的时候需要计算比较麻烦，不过可以采取工具或脚本实现。
移动端H5页面控制台打印信息：vconsole
06-01
在移动端H5页面开发中，由于手机浏览器的限制，开发者往往无法直接在设备上查看到JavaScript的控制台输出信息，这给调试带来了诸多不便。为了解决这个问题，开发者社区提出了一个名为vConsole的解决方案。vConsole是...
h5应用如何适配移动端(干货总结)
qq_48896417的博客
04-13 2601
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结。
uniapp_内嵌H5
最新发布
分享程序相关知识
05-22 1048
使用uniapp开发微信小程序，实现内嵌H5的功能。
h5针对移动端适配问题
h_el_lo的博客
05-16 360
h5适配移动端
超详细讲解H5移动端适配 —— 移动端适配方案
李水灵的博客
10-30 4986
目前来讲这三种方案是现在用的最多的方案，它们都有各自的优缺点。
超详细讲解H5移动端适配
程序员成长指北
09-08 1844
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言移动互联网发展至今，各种移动设备应运而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现的一致，前端工程师就不得不对页面进行移动端适配了。「如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者前置知识在学习移动...
详解移动端h5页面根据屏幕适配的四种方案
11-21
在移动端H5页面开发中，适配屏幕是一个重要的任务，以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案： ### 方法一：引入淘宝开源的可伸缩布局方案（lib-flexible） 淘宝的可...
H5移动端适配 Flexible方案
09-01
在移动互联网时代，H5页面的适配问题显得尤为重要，尤其在各种屏幕尺寸、分辨率各异的设备中，如何确保页面在不同设备上呈现一致的效果，这就是Flexible方案的核心所在。本文将深入探讨H5移动端适配的基本概念和...
mobileAdapt:移动端加载h5页面适配
05-29
移动端加载h5页面适配，实现swiper图片轮播使用任意尺寸手机屏幕，同时图片宽高也是可以任意指定，不采用@media()标签。 在浏览器模式下，加载的页面能够自由变换长宽而让页面保持适配，但是在移动端却会由于不同...
移动端h5页面虚拟摇杆
07-31
总的来说，这个移动端H5页面虚拟摇杆的实现，展示了HTML5和JavaScript在移动设备上强大的交互能力，结合Zepto.js的触摸事件处理，为用户提供了一种直观且灵活的控制方式。开发者可以通过理解并修改这个demo，将其...
rem.js 移动端 H5 解决各种机型适配问题的js
04-20
rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。 一般用于在移动端H5页面中解决各种机型适配问题的js，文件中详细说明。
今日头条H5移动端APP页面
03-02
今日头条H5移动端APP页面，开发的H5的移动应用提供便捷的前端，内容为APP页面模板不含后台的Html+Css+js页面，方便直接套用样式，做的非常漂亮
仿今日头条移动端H5APP页面
01-03
仿今日头条H5移动端APP页面，开发的H5的移动应用提供便捷的前端，内容为APP页面模板不含后台的Html+Css+js页面，方便直接套用样式，做的非常漂亮
整套移动端h5页面源码
12-09
电商项目源码，包含了所有一整套端，有需要端同学可以下载
移动端H5
m0_48524046的博客
11-05 2077
1.在移动端h5中，经常会遇到下图这种情况的弹窗，弹窗背景后面的内容不允许滚动2.只需要在背景节点身上加上即可(vue中)，此时处于该节点及其子节点等将无法实现页面滚动。
腾讯网移动端H5页面设计实战分享
qxx522550309的博客
10-31 1583
双屏互动游戏设计 “ola快跑”双屏互动游戏是前端开发工程师极具创意的一款产品，是腾讯世界杯报道期间主打的一款基于移动端及PC端联动的双屏互动跑酷射门类游戏，是世界杯报道期间在PC端和移动端同时嵌入的游戏。这款游戏轻松、有趣味，在世界杯这一特殊时期，大家对足球的热情也点燃了用户对这款小游戏的喜爱。ola快跑主要页面展示如图8所示。
移动端H5页面开发的几种方法
热门推荐
sinat_27358671的博客
02-02 2万+
单位： px 宽度百分比，高度px 在不同屏幕下的效果是不一样的，可用媒体查询（@media）对不同宽度的手机进行适配，麻烦，不推荐使用 单位：rem 1、flexible 用法：https://blog.csdn.net/sinat_27358671/article/details/82772206 2、原生js重置rem单位 (function (doc, win, imgW) { ...
h5移动端注意事项
sinat_38992528的博客
04-16 828
转自：https://blog.csdn.net/qq_36584352/article/details/80775529&&https://www.jianshu.com/p/650819820c86 一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, m...
jquery移动端h5页面开发
11-19
在jQuery移动端H5页面开发中，我们可以使用以下技巧和方法： 1. 使用viewport设置移动端页面的宽度和缩放比例，例如： ```html , initial-scale=1.0"> ``` 2. 使用CSS3媒体查询来适配不同的屏幕尺寸，例如： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值