您的当前位置:首页rem绝对自适应方案解析
广告

rem绝对自适应方案解析

2023-11-30 来源:六三科技网

使用这个单位可以创建完美的可扩展布局,只需根据页面大小去修改html的font-size,就能达到适配整个页面的目的。那么问题来了,如何使html的font-size自适应呢?

媒体查询

media的用法这里就不赘述,简单说明通过媒体查询修改html的font-size以达到页面自适应的目的。

html如下:

 <article class="container"> <ol> <li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px 则1rem = 16px</li> <li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li> <li>所以要实现html字体在不同页面大小下自适应</li> </ol> </article>

css如下:

//媒体查询控制html字体大小 @media (max-width:767px) { html{ font-size: 14px; } } @media (min-width:768px) { html{ font-size: 16px; } } @media (min-width:992px) { html{ font-size: 20px; } }//页面元素的简单样式 .container{ padding: 1rem; } li{ font-size: 1rem; }

通过媒体查询,在不同大小区间的页面上,设置html的font-size都不一样;

页面宽度为700px时,html的字体大小为14px,此时 1rem = 14px ,li元素的字体大小就是14px,包裹的内边距也是14px;改变页面宽度为800px,html的字体大小为16px,此时 1rem = 16px ,li元素的字体大小变为16px,包裹的内边距也变为16px;

这种方式当然媒体查询划分的越细致,自适应越强,但是无法实现完全自适应,只是区间性的。

vw

vw代表的视口的 1/100 100vw代表的即是视口的宽度。使用它我们就可以实现html的font-size完全自适应了。

css如下:

 html{ font-size: calc(16/768*100vw); //以768时16px为标准进行缩放 }

例子的768px为一个假设的标准值,一般设计稿的大小为标准,然后再进行适配。调节页面大小,可以完全自适应。

JS调整

加载页面和调整窗口大小的时,设置html的字体大小,已达到自适应的目的。

 (function(){ var doc = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function changeFontSize(){ var clietWidth = doc.offsetWidth, scale = clietWidth/768; //以768为标准 doc.style.fontSize = scale * 16 + 'px'; } if (!doc.addEventListener) return; window.addEventListener(resizeEvt,changeFontSize) //窗口大小变化或者手机横屏 document.addEventListener('DOMContentLoaded',changeFontSize) //加载页面触发 })()

1、获取视口宽度

2、以视口宽度对标准的变化,设置html的font-size

小编还为您整理了以下内容,可能对您也有帮助:

px2rem 移动端自适应方案

开发 WebApp 时,我们通常只会从设计师那边拿到一个尺寸的项目设计图,比如是按照 iphone 6 为基础设计的,因此前端需要让这一套设计稿能够通用在不同的设备型号中,本文介绍的方式是采用 hotcss.js 插件。

在 vue-loader 中使用 px2rem 插件,首先安装 px2rem-loader :

根据设计稿所采用的手机型号(如iPhone 6 或 iPhone X),那么宽度则为 640px 或 750px ,因此先在 chrome 调试工具中获取移动端的 <html> 根元素的 font-size 的值,然后在配置 vue-loader 时将其设为 remUnit 参数的值:

这样就可以根据设计稿尺寸,在开发时写 CSS 像素的绝对值 ,即 px 单位, px2rem 会自动将尺寸转换成相应的 rem 单位,结合不同终端生成的不同 html 根元素的字体大小,从而实现一套设计稿在不同设备完美兼容的效果。

我将之前做的一个项目目录结构和 Webpack 配置文件提取出来,生成一个简易的 WebApp 脚手架,用于实现本文所述的自适应方案。

Github项目地址: 基于Vue的WebApp项目构建模板

HTML5如何利用rem实现自适应布局

    分析设计图

假设设计图大小为1080px。这也就意味着,在开发时,需要兼容的最大分辨率为1080px,最小的为320px。

2. 调整视口

代码实例:

<!DOCTYPE html>

<head>

    <meta charset="UTF-8" />

    <title>布局之路-移动端开发实例</title>

    <meta name="viewport" content="width=device-width,user-scalable = no" />

    <link rel="stylesheet" type="text/css" href="css/reset.css" />

</head>

<body>

    <div class="wrap"></div>

</body>

</html>

代码解析:由于使用不同设备打开网页时,宽度均有所不同,所以不能讲视口设置为固定值,应当为width=device-width,即将视口设置为当前设备的宽度。

3. 确定设计图的最小字体

浏览器(部分)能够显示的最小字体未12px,当移动端页面宽度为320px时,要保证最小字体为12px,那么在1080px的设计图中,最小字体应当为42px。

代码实例:

    <style type="text/css">

        html {

            font-size: 42px;

        }

    </style>

4. 按照设计图的像素进行开发

按照正常网页开发流程,进行网页开发即可。

5. 使用百分比和rem替换px

代码效果对比:

/*使用固定像素*/

.box {

    float: left;

    width: 658px;

    font-size: 72px;

    text-align: center;

    line-height: 195px;

}

/*使用百分比和rem*/

.box {

    float: left;

    width: 60.93%;

    font-size: 1.71rem;

    text-align: center;

    line-height: 4.64rem;

}

代码解析:

水平方向的值,将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如,父级宽度为1080px, 子级元素为197px,那么子元素转换为百分比为:197/1080*100%=18.24%。需要注意的是百分比根据父级计算,当标签结构级别不同时,计算公式中的“分母”也有所不同,在开发时这个地方很容易出现问题,请务必注意。

垂直方向的值,将具体像素调整为rem,与水平方向相比,垂直方向的计算就比较简单。例如,行高为195px,HTML标签当前的字体大小为42px,将行高转换为rem单位,即195/42= 4. 64rem。

六三科技网还为您提供以下相关内容希望对您有帮助:

移动端rem自适应布局-最简单易懂的两种方法

2、选中需要把px改为rem单位的css样式,alt+z更换为rem布局

HTML5如何利用rem实现自适应布局

5. 使用百分比和rem替换px 代码效果对比:/*使用固定像素*/.box { float: left; width: 658px; font-size: 72px; text-align: center; line-height: 195px;}/*使用百分比和rem*/.box { float...

px2rem 移动端自适应方案

然后在配置 vue-loader 时将其设为 remUnit 参数的值:这样就可以根据设计稿尺寸,在开发时写 CSS 像素的绝对值 ,即 px 单位, px2rem 会自动将尺寸转换成相应的 rem 单位,结合不同终端生成的不同 html...

移动端自适应解决方案

设计稿尺寸为750 * 1340,移动端rem自适应方案一般分2种 一、网易做法 整个屏幕为7.5rem,1rem=100px 二、淘宝做法 整个屏幕为10rem,1rem=75px 当然也可以转化为px : rem = 100 : 1。 如果想转化为px...

前端rem是什么意思

rem在不同屏幕大小的适应性上有很大的优势。在响应式设计中,我们需要根据不同屏幕大小自适应布局,这时候使用rem非常方便。此外,rem还适合移动端开发,因为移动端设备屏幕大小各异,使用rem可以很好地解决这个问题。总的来说...

rem布局如何使用rem布局怎么实现

在实际应用中,pc页面需要实现响应式的比例缩放(即自适应),rem灵活布局是一种现实而理想的解决方案。移动端可以用rem布局,也可以用px(主要是flex),这要看产品是怎么设计的。Css3规定1rem的大小是根元素...

Vant移动端rem适配方案

propList 用来设定可以从 px 转为 rem 的属性 例如 * 就是所有属性都要转换,width 就是仅转换 width 属性 rootValue 应该如何设置呢?如果你使用的是基于lib-flexable的REM适配方案,则应该设置为你的设计稿的十分之一。

说说“自适应pc端网页制作”那些事

解决方法: 把根元素html的font-size设为100px;然后在body里设置font-size:10 问题二: 有很多网页是在一屏内显示的,做自适应页面的话就需要实现在不同屏幕大小的情况下都要居中显示,这样才看起来合理 解决方法: ...

rem 7是什么意思?

由于rem相对于根元素字体大小而定,所以只需要通过修改根元素字体大小,就可以实现页面元素的自适应。其次,使用rem 7可以统一管理页面元素的长度单位,简化了开发流程。最后,由于rem不像绝对长度单位一样易受到操作系统和浏览器...

HTML5实现移动端自适应的几种方法介绍

viewport标签极其属性:代码如下:每个属性的详细介绍:2、使用css3单位remrem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素...

Top