rem的认识和个人见解

看了很多rem的讲解和很多博客,这里我说说自己对rem的认识。

    rem : 作为css3新的属性单位,基于document.documentElement元素的fontSize基准值来确定其初始值,让处于

                document内的所有元素基于document.documentElement设置的fontSize来做赋值

                比em更直观,也不容易造成混乱叠加;


    简单一句话,这就是rem的原理和设置1单位rem的方法。

    rem是前端开发人员对mobile设备适配开发的一大主力,所以充斥着很多适配方法,力致于让网页在mobile设备得到更好地展现,让用户能在mobile设备得到更好地体验。

    说起对rem的适配方法,主要是针对document.documentElement元素fontSize属性的设置来调整H5在mobile设备上所占位置的调整;说到mobile设备,那么还要说到一个问题,那就是物理像素、逻辑像素、以及像素比,通常我们的UI设计师们给我们的市面上通用的一些mobile设备H5设计稿,比如640的和750的设计稿,640的设计稿是基于Iphone4和iPhone5s来做的设计稿,750则是根据iPhone6来做的,这里我们要注意一点的就是,设计师们做的640和750的设计稿,是基于物理像素做的,而我们前端开发人员用的css单位 px这些是基于逻辑像素来写的,所以我们需要进行转换,那就需要像素比了,因为   ,

    物理像素 = 逻辑像素 * 像素比;

     经过转换后,我们得到了我们开发所需的逻辑像素,这时候,我们就开始考虑做适配了,这里有一篇文章讲得很好,可是我没找作者,就引用不过来,所以在这打个链接(点击打开链接),这里讲rem的适配讲的非常透彻。

    根据docume.documentElement元素的fontSize决定热门的单位值,


    这里就根据640设计稿和750设计稿来说,因为设计稿不一样,所依照的基准值就不一样;    

  

             6.4 根据640设计稿在设备上做的一个开发基础值,
基础值又为了更好开发,将根元素font-size设置为100px,
取100只是为了计算方便,减少浮点数对布局的影响
1REM=100px;
如果设计稿是750,
因为屏幕是偶数,宽度只能是偶数,不能出现7.5,所以750的设计稿不能默认设置100px,
得到7.5来使用,它是一个单数,
为了更好地开发,我们设置它为75px,750的设计稿,屏宽10rem,1rem=75;
开发基础值为 10 */

             var deviceWidth = document.documentElement.clientWidth;

                 fontSize = deviceWidth / 6.4 + 'px';640

                 fontSize = deviceWidth / 10 + 'px';750

   /* 为了更好地体现出设计界面,那么我们将根据依据 设计稿算出来的基础值来做各个mobile设备的参照值
        所以就有了,fontSize = 视口宽度 / 基础值 + px;
然后就是css的px和rem的换算,为了更快,更方便的转换,在这里,我推荐使用预编译软件

            LESS 、sass SCSS
            如果使用LESS,那么换算函数则为
                @baseFontSize: 设计稿对fontSize计算的值;
                .px2Rem(@name,@px){
                        @{name}:@px/  @baseFontSize * 1rem;
                 }
        
        换算原理,按照设计尺寸@px / 设计稿平分的份数 得到 设计尺寸占据平分份数的比例,
            比例 * 1rem,就得到了 设计尺寸变换单位rem后得到的rem值;

*/
       

/* 如果你需要对兼容设备进行限制,则需要对设备宽度进行判断 */
if( deviceWidth> 640) deviceWidth = 640;
     fontSize = deviceWidth/ 6.4+ 'px';
            想拥有更好地用户体验,就需要考虑页面在mobile设备上的显示问题,这就要涉及到像素比
            
            如果像素比大于2,是3,或4,那么我们的页面在基于drp = 2的情况下就考虑缩放,
            因为缩放比例最大和最小不过1,所以,我们使用 1 / drp 得到缩放比例,
            然后赋值给拥有viewport属性的
            meta标签,我们还要对其 初始缩放比例、最大、最小缩放比例进行设置;



initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + '

         var scale = 1 / devicePixelRatio;

    如果你考虑到pc使用px,mobile设备使用rem,那么你就得去识别浏览器内核,因为mobile设备的浏览器内核和pc端的浏览器内核是不一样的,同时你的css也得写两套,

    如何判断,那就得用到BOM的API    navigator,

    最近在写一个手机端的东西,这边把我配置的rem逻辑附上,希望大家多找麻烦,毕竟我是菜鸟



            


### CSS中的`rem``em`单位及其在Vue项目中的使用 #### `em`单位的基本概念与作用 `em`是一个相对长度单位,其值相对于当前对象内文本的字体尺寸。如果用于字体,则是相对于父元素的字体大小。这意味着在一个嵌套结构中,子元素继承并可能放大或缩小来自父级设定的比例。 ```html <div style="font-size: 20px;"> Parent div text. <p style="font-size: 1.5em;">Child paragraph with larger font.</p> </div> ``` 上述例子展示了如何利用`em`来定义段落内的文字大小为父容器字体大小的1.5倍[^1]。 #### 使用`em`设置边距内边距的例子 除了应用于字体大小外,还可以用`em`指定其他样式属性如内外边距: ```css .container { margin: 1em; padding: .5em; /* 半个em */ } ``` 这段代码表示`.container`类下的元素将拥有上下左右各1em宽的外部间距以及内部填充宽度的一半即0.5em。 #### `rem`单位的基本概念与作用 不同于`em`依赖于最近祖先元素的字体大小,`rem`(root em)始终依据HTML文档根节点(`<html>`)的字体大小进行计算。因此在整个网站范围内保持了一致性可预测性,尤其适合创建响应式的Web应用程序。 ```html <html style="font-size: 16px;"> <body> <h1 style="font-size: 2rem;">Heading using rem units</h1> </body> </html> ``` 此示例说明了一个标题标签被赋予了两倍于根元素默认字体大小的高度,也就是32像素高[^4]。 #### 应用实例对比——`em` vs `rem` 考虑下面这个简单的HTML片段: ```html <style> .parent { font-size: 20px; } .child-em { font-size: 1.5em; } .child-rem { font-size: 1.5rem; } </style> <div class="parent"> <span class="child-em">Text sized by ems.</span><br/> <span class="child-rem">Text sized by rems.</span> </div> ``` 在这个案例里,“ems”的跨度会根据它的直接上级(这里是`.parent`)的变化而变化;相反地,“rems”的表现则独立于任何特定层次关系之外,仅受全局范围的影响。 #### Vue项目中的实践建议 为了使基于Vue的应用程序更好地支持多平台访问,推荐采用`rem`作为主要度量标准之一。这不仅有助于简化跨屏适配过程,而且还能提高维护效率。不过,在某些特殊情况下也可以适当混入少量精确到具体数值(`px`)或者局部性的比例缩放(`em`)操作以满足个性化需求[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值