专栏首页十月梦想移动端适配之终极适配方案rem适配

移动端适配之终极适配方案rem适配

前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!

简单介绍一下这个rem适配

px  固定值,设置多少就是多少不随屏幕大小改变 em  相对于自身字体大小 font-size:12px;  1em=12px em引发问题  1.chrome浏览器下规定字体最小12px 2.如果两个元素的字体规格不一样就是分别就行设置,不方便设置 rem:css3新增的相对单位,相对于根节点(html)字体设置 html{ font-size:12px; } 1rem=12px,5rem=60px;

首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配!

当然去适配的时候这个根节点的大小如何设置才能更好适配呢?这个就是问题,那么就要去动态设置这个根节点大小

<script>
/*动态根据屏幕大小进行设置相对的根节点字体大小
 * 
 * */
var html=document.documentElement;
var width=window.screen.width;
//以当前设备宽度16分之一为当前根节点
html.style.fontSize=width/16+'px';
</script>

或许有疑问这个16怎么而来的,这个16是任意设置的,设置16是一iphone5为例,独立设备像素的320为例,每一小份是20px,则在ip5下,根节点1rem=20px 那么这个px转rem怎么进行转换

可以使用rem简单搞定!

less文件

@rem:20rem;
.box{
    width:180/@rem;
    height:245/@rem;
    background-color: hotpink;
}

在iphone5下,1/16代表20px,那么在less文件中的声明的rem变量就为20rem(代码需要设置的像素/这个20px),width:180/@rem,在iphone6下显示为宽度180px,则自动换算对于rem; 当然rem与px的转换在hbulider的设置内也可以设置相互转换;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 边框阴影

    十月梦想
  • CSS边框

    border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

    十月梦想
  • 框模型

         元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

    十月梦想
  • 文字描边css

    -webkit-text-stroke: 3.3px #2A75BF; -webkit-text-fill-color:#fff; 该方法在安卓端貌似不支持,显...

    蓓蕾心晴
  • 简单粗暴的移动端适配方案 - REM

    腾讯NEXT学位
  • 简单粗暴的移动端适配方案 - REM

    手机市场日渐丰富的同时,给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,...

    IMWeb前端团队
  • px和rem的换算与设置

    一般所有浏览器的html根元素font-size:16px 1rem = 16px 所以所有px值都基于它来换算 设计稿px/换算的rem = 16px ...

    杨肆月
  • VUE开发一个组件——Vue PC城市选择控件

    前面用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的?其实和H5相同,样式不同而已。

    Javanx
  • JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)

    从入门到进错门
  • 零碎笔记:移动Web特别样式处理

    高清图片跟我们平时下的那种电影高清图片是不一样的,移动Web的高清图片的概念是我这张图这么大,清晰度这么多,那么我们在移动设备上就该展示这么清晰。那么为什么会产...

    Dunizb

扫码关注云+社区

领取腾讯云代金券