WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

khs1994 发布于2019-08-02 15:09 / 785人阅读

摘要：页面实现等比例缩放自适应通过和实现一和简介是相对长度单位，是指相对于根元素即元素字号大小的倍数。当过大时，以其为基准的数值会出现精度丢失，造成较大的误差。此时，单位会以为基准进行计算，页面就会整个跑偏。

WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现 一、rem 和 vw 简介 1. rem

rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。

浏览器支持：Caniuse

示例

若根元素 font-size 为 12px

html {
    font-size: 12px;
}
h1 { 
    font-size: 2rem;  /* 2 × 12px = 24px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 12px = 18px */
}
div {
    width: 10rem;  /* 10 × 12px = 120px */
}

若根元素 font-size 为 16px

html {
    font-size: 16px;
}
h1 { 
    font-size: 2rem;  /* 2 × 16px = 32px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 16px = 24px */
}
div {
    width: 10rem;  /* 10 × 16px = 160px */
}

2. vw

vw 是相对长度单位，相对于浏览器窗口的宽度，浏览器窗口宽度被均分为100个单位的vw

浏览器支持：Caniuse

Opera Mini不支持该属性

示例

当浏览器窗口宽度为320px时，1vw = 3.2px

p {
    font-size: 5vw;   /* 5 × 3.2px = 16px */
}
div {
    width: 20vw;  /* 20 × 3.2px = 64px*/
}

当浏览器窗口宽度为375px时，1vw = 3.75px

p {
    font-size: 5vw;   /* 5 × 3.75px = 18.75px */
}
div {
    width: 20vw;  /* 20 × 3.75px = 75px*/
}

二、rem 和 vw 结合实现WEB页面等比例缩放自适应 1. 选择基准窗口宽度及

示例：
以 iPhone 6/7/8/X 的屏幕宽度 375px 作为基准窗口宽度；
以 15px 最为 html 元素的 font-size，即rem单位的基本长度。

html {
    font-size: 15px;
}
h1 { 
    font-size: 2rem;  /* 2 × 15px = 30px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 15px = 18px */
}
div {
    width: 10rem;  /* 10 × 15px = 150px*/
}

注意：html 元素的 font-size 不宜过大，也不宜过小。
当 font-size 过大时，以其为基准的 rem 数值会出现精度丢失，造成较大的误差。
当 font-size 过小时，由于很多主流浏览器 font-size 不能小于12px，当 font-size 小于12px 时，会以 12px 展示。此时，rem 单位会以 12px 为基准进行计算，页面就会整个跑偏。

2. 将 html 元素的 font-size 替换为使用 vw 表示

窗口宽度：375px 

=> 1vw  = 3.75px
=> 15px = ( 15 / 3.75 )vw = 4vw

因此， html 元素的 font-size 可以替换为 4vw

html {
    font-size: 4vw;
}
h1 { 
    font-size: 2rem;  /* 2 × 4vw × 3.75px = 30px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 4vw × 3.75px = 18px */
}
div {
    width: 10rem;  /* 10 × 4vw × 3.75px = 150px*/
}

当窗口宽度调整为320px时

1vw = 3.2px
4vw = 4 × 3.2px = 12.8px

html {
    font-size: 4vw;
}
h1 { 
    font-size: 2rem;  /* 2 × 4vw × 3.2px = 25.6px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 4vw × 3.2px = 15.36px */
}
div {
    width: 10rem;  /* 10 × 4vw × 3.2px = 128px*/
}

可见，此时所有以rem为单位的字号和长度都会随着屏幕宽度的放大和缩小而进行等比例缩放。

重要的事情说第二遍
注意：html 元素的 font-size 不宜过大，也不宜过小。
当 font-size 过大时，以其为基准的 rem 数值会出现精度丢失，造成较大的误差。
当 font-size 过小时，由于很多主流浏览器 font-size 不能小于12px，当 font-size 小于12px 时，会以 12px 展示。此时，rem 单位会以 12px 为基准进行计算，页面就会整个跑偏。

3. 为页面设置最大宽度和最小宽度 当页面小于300px时，不再等比例缩小，当页面大于500px时，不再等比例放大

窗口宽度300px时

1vw  = 3px
4vw = 4 × 3px = 12px

窗口宽度500px时

1vw  = 5px
4vw = 4 × 5px = 20px

@media screen and (max-width: 300px) {
    html {
        width: 300px;
        font-size: 12px;
    }
}

@media screen and (min-width: 500px) {
    html {
        width: 500px;
        font-size: 20px;
        margin: 0 auto;  /* 让窗口水平居中展示 */
    }
}

三、根据浏览器宽度切换PC和WAP页面 1. 当页面宽度大于阈值时，自动切换到PC页面，当小于阈值时，切换回WAP页面 WAP页面




    WAP页面
    


    我是WAP页面

PC页面




    我是PC页面
    


    我是PC页面

GPU云服务器云服务器等比例缩放图片 php等比例缩放 rem宽度自适应单例模式实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53937.html

WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

摘要：页面实现等比例缩放自适应通过和实现一和简介是相对长度单位，是指相对于根元素即元素字号大小的倍数。当过大时，以其为基准的数值会出现精度丢失，造成较大的误差。此时，单位会以为基准进行计算，页面就会整个跑偏。 WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size...

pubdreamcc 2019-08-30 10:59 评论0 收藏0
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

摘要：页面实现等比例缩放自适应通过和实现一和简介是相对长度单位，是指相对于根元素即元素字号大小的倍数。当过大时，以其为基准的数值会出现精度丢失，造成较大的误差。此时，单位会以为基准进行计算，页面就会整个跑偏。 WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size...

abson 2019-07-01 12:49 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

wangbinke 2019-08-29 16:56 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

tianren124 2019-08-23 12:21 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 评论0 收藏0