媒体查询 + rem用法

计算方法

计算rem方法:
结合媒体查询 -> 随着设备的改变 更改html font-size的值。
?
媒体查询确定范围??
?
移动端设计图 : 640px 750px 1080px;
dpr 2 2 3
范围 320px 375px
@media screen and (max-width:320px){
    html{
        font-size:12px;
    }
}
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:376px){
    html{
        font-size:16px;
    }
}

实现流程

ui设计图   640px
?
dpr    2
?
ps量出height   88px;
?
88px / 2 ==  44px;
?
设计图640px    dpr  2
?
640px  /  2 == 320px
?
44px / 12px == rem

vw + rem

为了方便计算,可以把html的font-size值 设置成100px; 1rem == 100px;
100px是一个固定值,没办法随着设备的改变而改变。
能跟随设备发生改变
vw 根据视口大小进行改变。
100px == ?vw

根据设计图分配情况

  • 第一种情况:
    如果UI设计图为 640px
    考虑的dpr 2
    适配的核心设备 320px;
    ?
    100vw == 320px
    1vw == 3.2px
    ?vw == 100px
    31.25vw == 100px
  • 第二种情况
    如果设计图为750px
    考虑dpr 2
    适配的核心设备 375px
    100vw == 375px
    1vw == 3.75px
    ?vw == 100px
    26.67vw == 100px;

设置方法

如果设计图为 640px html设置{font-size:31.25vw}
如果设计图为 750px html设置{font-size:26.67vw}

计算流程

vw 结合 rem 计算流程
因为设计图 640px
所以html设置{font-size:31.25vw;}
ps中获取height 88px
dpr 2
88 / 2 == 44px
44 / 100 == 0.44rem;

flxible.js 插件

计算流程

1:引入flxible.js插件
<script src=""></script>
2: 去掉html里面默认的meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">

flxible.js原理

在页面中引入flexible.js后,flexible会在<html>标签上增加一个data-dpr属性和font-size样式(如下图)。
为了方便计算可以设置成100px;
//js首先会获取设备型号,然后根据不同设备添加不同的data-dpr值,比如说1、2或者3,从源码中我们可以看到。
if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}
页面中的元素用rem单位来设置,rem就是相对于根元素<html>的font-size来计算的,flexible.js能根据<html>的font-size计算出元素的盒模型大小。这样就意味着我们只需要在根元素确定一个px字号,因此来算出各元素的宽高,从而实现屏幕的适配效果

把视觉稿中的px转换成rem

工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种,所以你还可以根据自身情况来调整,具体如何转换,我们以视觉稿为640px的宽来举例子,把640px分为100份,每一份称为一个单位a,那么每个a就是6.4px,而1rem单位被认定为10a,此时,1rem=1(a)X10X6.4(px)即64px。

640px/100=6.4px                              1个单位a为6.4px
1rem = 10a                                   1rem单位被认定为10a
1rem = 1(a)*10*6.4(px) = 64px

原文地址:https://www.cnblogs.com/Kuoblog/p/12459813.html

时间: 2024-11-05 14:54:50

媒体查询 + rem用法的相关文章

css3 media媒体查询器用法总结

css3 media媒体查询器用法总结 Author:owenhong2014-05-30 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候

css3 media媒体查询器用法总结(附js兼容方法)

css3 media媒体查询器用法总结 标签: 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示

css3 media媒体查询器用法总结 兼容ie8以下的方法

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个参数解释: width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许

css3 media媒体查询器用法总结(转载)

用法及meta标签的使用及IE最新 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <m

media媒体查询器用法总结

一 设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这段代码的几个参数解释: • width = device-width:宽度等于当前设备的宽度 • initial-scale:初始的缩放

媒体查询的用法

@media all and (min-width:840px) //所有最小水平屏幕宽度为800像素的屏幕应用规则 @media (min-width:800px) //简写方式,同上 @media (min-width:800px) and (max-width:1200px) //所有介于800px和1200px之间的屏幕应用规则 @media (min-width:800px) or (orentation:portrait) //宽度至少是800px或方向是纵向的,则会应用该规则 @m

移动页面100%自适应,媒体查询 - REM单位字体设置

/* 媒体查询 - 字体设置 */ /* 平滑过渡 */ html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; } /* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */ @media screen and (max-width: 1280px) { html{ font-size: 20

rem 适配布局 + LESS + 媒体查询

1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制 比如:根元素(html )设置的 font-size=12px:非根元素设置 width:2rem:则换成px 表示 24px(12px*2rem) 2. 媒体查询(@media) @media 可以针对不同的屏幕尺寸设置不同的样

Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面rem = 页面元素值(设计稿) / (屏幕的宽度/划分的份数) (屏幕的宽度/划分的份数) = html大小 这个算法你也不需要太纠结,按照这个来就是 最后终结一下: 首先我们选一套标准尺寸 750为准 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到