`

手机端页面自适应解决方案—rem布局

 
阅读更多

只需在页面引入这段原生js代码就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function (doc, win) {
       var docEl = doc.documentElement,
           resizeEvt = 'orientationchange' in window ? 'orientationchange' 'resize',
           recalc = function () {
               var clientWidth = docEl.clientWidth;
               if (!clientWidth) return;
               if(clientWidth>=640){
                   docEl.style.fontSize = '100px';
               }else{
                   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
               }
           };
 
       if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);

 

如何使用?

这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)

 

为什么是640px?

设计图一般是640px的,这样相当于100px = 1rem,可以方便计算;

因为是640px所以应限制下页面的大小,所以最外层的盒子应该是:

 

1
2
3
4
5
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;

 

转至:https://www.cnblogs.com/beiz/p/5666477.html
分享到:
评论

相关推荐

    PC、移动端自适应等比缩放布局方案

    本文将详细介绍一种适用于PC端大屏监控及移动端布局的解决方案——REM与VW布局相结合的方式。 #### 布局历史概述 - **静态布局**:早期网页设计中普遍采用的方法,使用固定单位如`px`来指定元素的大小与位置,但在...

    手机端页面rem宽度自适应脚本

    总结来说,本文通过介绍rem单位、viewport元标签、JavaScript脚本的编写和使用Sass/Less预处理器的优势,为开发人员提供了实现手机端页面宽度自适应的一套完整解决方案。这套方案不仅考虑到了不同设备的特性,而且...

    详解vue中移动端自适应方案

    手淘的`lib-flexible`库是另一种流行的移动端自适应解决方案。它可以轻松地将设计稿的像素值转换为基于`rem`的CSS值,适应不同分辨率的屏幕。 首先,你需要通过npm安装`lib-flexible`: ```bash npm i lib-...

    详解rem 适配布局

    随着手机型号的多样化,前端开发者面临着如何实现跨设备自适应布局的挑战。在这样的背景下,`rem`单位应运而生,成为解决这一问题的关键技术。`rem`(root em)是一种相对单位,它基于根元素(通常是`html`元素)的...

    手机端用rem+scss做适配的详解

    因此,使用REM(root em)单位结合SCSS预处理器成为一种高效且流行的响应式网页设计解决方案。 REM单位相对于根元素(html)的字体大小进行计算。例如,如果根元素字体大小为10px,那么1rem就等于10px,2rem就等于...

    移动端手机和平板适配解决方案

    本解决方案针对“移动端手机和平板适配”提供了实践性的方法,已经在生产环境中得到了实际应用。 在H5移动端开发中,适配方案通常涉及以下几个关键技术点: 1. **响应式设计(Responsive Design)**:响应式设计是...

    详解H5 活动页之移动端 REM 布局适配方法

    总结来说,移动端REM布局适配方案相比viewport缩放,提供了更灵活、更精确的布局解决方案。通过动态计算html的font-size,并将设计稿尺寸转换为REM单位,开发者可以创建出高度一致且适应各种屏幕尺寸的H5活动页。而...

    vue3移动端适配的解决方案(老方案)

    Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践,旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能,但移动端适配是一个挑战,因为移动设备的屏幕尺寸、...

    267_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip

    综上所述,这个"267"源码包是一个完整的前端开发解决方案,涵盖了HTML5、CSS3和JavaScript技术,尤其强调自适应和响应式设计,对于开发者来说,这是一个很好的起点,无论是学习还是快速构建多设备兼容的网站都非常...

    vue2移动端响应式模板

    这个模板基于Vue2,利用了lib-flexible和postcss-plugin-px2rem这两个关键工具,实现像素单位(px)到相对单位(rem)的自动化转换,从而达到页面元素在不同分辨率屏幕上的自适应布局。 lib-flexible是阿里巴巴团队...

    创意HTML5摄影工作室模板是一款支持手机端的响应式时尚摄影网站

    在这个模板中,可能采用了媒体查询(Media Queries)、弹性网格布局(Flexible Grid)、相对单位(如em和rem)以及可伸缩的图片和视频等技术,确保无论是在桌面电脑、平板还是手机上,用户都能获得一致且舒适的浏览...

    仿UC网址导航源代码

    【仿UC网址导航源代码】是一款基于HTML技术开发的手机网址导航系统,旨在提供一个简洁易用、无需数据库的解决方案。这款源码以其高度自适应的设计,能够在不同类型的移动设备上展现出良好的显示效果,为用户提供了...

    洗衣店服务展示响应式网页模板

    响应式网页设计是一种现代网页开发技术,它使得...综上所述,"洗衣店服务展示响应式网页模板"是一个全方位的解决方案,涵盖了设计、开发和用户体验的多个层面,旨在为洗衣店创建一个功能齐全且视觉吸引人的在线平台。

Global site tag (gtag.js) - Google Analytics