热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

利用REM实现移动端布局的高效适配技巧

在移动设备上实现高效布局适配时,使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位,能够根据根元素的字体大小动态调整,从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小,开发者可以轻松实现响应式设计,提高用户体验。此外,文章还将探讨一些常见的问题和解决方案,帮助开发者更好地掌握这一技术。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

使用rem适配已经快一年了,感觉还是不错的,在这里记录一下。 ##1.原理 rem是一个相对单位,相对的是根元素‘html’的字号。比如html的font-size:100px;那么1rem=100px;html的font-size:120px;那么1rem=120px;所以我们可以根据手机不同的尺寸,设置不同的根元素字体,来适应不同的屏幕。而且它兼容性好,从安卓2.1就支持rem。

举个栗子:

//在iPhone5下
html{font-size:100px;
}

//在iPhone6下
html{font-size:116px;
}

.box{width:1rem;//在iPhone5下,width为100px;在iPhone6下,width为116px,从而实现了大小屏的适配
}

##2.设置基准 我们依据什么来设置根目录的字号呢?两种方案 ###2.1css媒体查询宽度设置断点 为什么是宽度?因为垂直方向的可以出滚动条,而水平方向出现滚动条就有点怪怪的了。

@charset "utf-8";
//iphone5
@media screen and (max-width: 374px){html{font-size: 85px;}
}
//iphone6
@media screen and (min-width: 375px)and(max-width: 413px){html{font-size: 100px;}
}
//iphone6 p标准模式
@media screen and (min-width: 414px){html{font-size: 110px;}
}

###2.2js查询计算宽高变化比 这种方案是查询设备的宽高并计算出宽高的变化比(相对于你的基准尺寸),使用变化小的那个比值来设置根元素字号。

!function() {var count &#61; 0;/*# 按照宽高比例设定html字体.- baseWidth和baseHeiht是设计稿尺寸- baseFontSize是720设计稿下html的fontsize- 按照当前屏幕宽高比跟设计稿宽高比较小的值作为缩放比例*/function setHtmlFontSize(callback) {var baseWidth &#61; 720, baseHeiht &#61; 1280, baseFontSize &#61; 22.5, newSize &#61; 22.5,sacle &#61; 1;//如果此时屏幕宽度不准确&#xff0c;就尝试再次获取分辨率&#xff0c;只尝试10次&#xff0c;否则使用innerWidth计算if(document.body.clientWidth !&#61;&#61; window.innerWidth && count <10) {document.body.style.display &#61; "none";window.setTimeout(setHtmlFontSize, 0);count&#43;&#43;;} else {var sacle &#61; Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),newSize &#61; parseInt( sacle * 10000 * baseFontSize ) / 10000;document.body.style.display &#61; "none";setTimeout(function() {document.body.style.display &#61; "";if(callback) {callback();}document.documentElement.style.fontSize &#61; newSize &#43; "px";}, 0);}}setHtmlFontSize();
}();

我目前采用的就是css方案&#xff0c;为什么放弃了js这种看起来更人性化的方案&#xff0c;是因为在测试的时候发现&#xff0c;有些低版本手机的某些浏览器下面会出现bug&#xff0c;它会先渲染一个没有计算过页面&#xff0c;然后再渲染成对的尺寸。反之css效率则很高。而且安卓尺寸千千万万&#xff0c;就不宠你&#xff0c;不宠你。其实是它们坑死我们~~

##3.小技巧 ###1.100px 我在写代码时并没有用px转rem插件&#xff0c;因为并不需要。技巧在于我们以1rem&#61;100px为基准&#xff0c;这样在写代码的时候&#xff0c;我们只需要将px的值移动两位小数就好了&#xff0c;这应该不用计算器把。。阿门 ###2.以小为标准 这里主要是指我们在用css媒体查询时&#xff0c;两个端点之间的尺寸使用小屏幕的基准。比如位于iPhone6和iPhone5之间的尺寸&#xff0c;使用iPhone5的基准。因为小屏幕的东西放大屏幕肯定空间是够的&#xff0c;但是反之则不一定。因为有时候会写一些笨笨的代码。。。举个例子&#xff1a; 输入图片说明 笨的写法就是按照宽度写罗&#xff0c;分别指定三个元素的宽度罗。哈哈&#xff0c;我还是比较喜欢flex。

##4.k e n g坑 之前带给我的烦恼就是雪碧图使用起来就不爽了&#xff0c;不过现在我们把中小图标全部使用图标字体替换了&#xff0c;也就ok了。雪碧图使用有哪些不爽呢&#xff1f;

  • 图片之间的留白要尽量大一点&#xff0c;要不然就会露出旁边的图片
  • 不同尺寸手机下会出现图片位置稍稍的错位&#xff0c;对于小图标而言&#xff0c;就非常明显了。 不使用雪碧图也有一个坑&#xff1a;

.box{width:1rem;height:1rem;background-size:100% 100%;//对滴background-size:1rem 1rem;//不对滴
}

background-size请使用100%,100%,而不是1rem,1rem,这种&#xff0c;因为在浏览器渲染时&#xff0c;我们的rem转化成px之后&#xff0c;是会有很多小数位的&#xff0c;浏览器对width、height的精确度和background-size的精确度是不一样的&#xff0c;非雪碧图&#xff0c;我们一般死不留白的&#xff0c;就会导致有一点点错位。

##5.字号需要使用rem吗 html的字号是用来布局用的&#xff0c;这里的字号是指整个页面的文字字号&#xff0c;设置在body中&#xff0c;其他元素继承。

我是不赞成在大屏手机下字号要变大的&#xff0c;会给人一种老人机的感觉。而且其他app还有网页都是使用的正常字号&#xff0c;你偏偏要给加大几个号&#xff0c;不好。

如果&#xff0c;如果&#xff0c;如果你硬是要加大&#xff0c;我教你一个简单方法&#xff0c;你千万别去一个个的改。使用sass中的变量&#xff0c;这样你就只要在媒体查询中修改一个变量的值&#xff0c;而不用每个元素每个元素去改了。后面我会写一个文章介绍sass的这个用处&#xff0c;这里不宜再发散了。我怕我止不住。

##6.结合em em&#xff1a;和rem一样&#xff0c;它是一个相对单位&#xff0c;但是它相对的是自身字号。

为什么需要结合em呢&#xff1f;

以前我们以640为基准时是没有必要使用这个单位&#xff0c;但是现在我们是以750为基准&#xff0c;我们就需要这个单位了。看看下面的例子&#xff0c;你就明白了。

输入图片说明

表单的label’单位电话‘&#xff0c;如果在750下&#xff0c;它为1rem(这个值是随便指定的)&#xff0c;它刚好可以容纳四个字&#xff0c;且两边有稍许留白。在我们切到640的时候&#xff0c;它的宽度变小了&#xff0c;但是我们的字号没有变化&#xff0c;就会出现不够容纳四个字的情况。因此我们这里使用em加rem定义&#xff1a;

.label-tel{width:4em;padding:0 0.05rem;
}


转:https://my.oschina.net/xiaoweibaer/blog/781991



推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • Java Socket 关键参数详解与优化建议
    Java Socket 的 API 虽然被广泛使用,但其关键参数的用途却鲜为人知。本文详细解析了 Java Socket 中的重要参数,如 backlog 参数,它用于控制服务器等待连接请求的队列长度。此外,还探讨了其他参数如 SO_TIMEOUT、SO_REUSEADDR 等的配置方法及其对性能的影响,并提供了优化建议,帮助开发者提升网络通信的稳定性和效率。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • 网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案,重点介绍了Robots协议的作用和使用方法,旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • JUC(三):深入解析AQS
    本文详细介绍了Java并发工具包中的核心类AQS(AbstractQueuedSynchronizer),包括其基本概念、数据结构、源码分析及核心方法的实现。 ... [详细]
  • [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 如何将TS文件转换为M3U8直播流:HLS与M3U8格式详解
    在视频传输领域,MP4虽然常见,但在直播场景中直接使用MP4格式存在诸多问题。例如,MP4文件的头部信息(如ftyp、moov)较大,导致初始加载时间较长,影响用户体验。相比之下,HLS(HTTP Live Streaming)协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段,并生成一个M3U8播放列表文件,实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流,包括技术原理和具体操作步骤,帮助读者更好地理解和应用这一技术。 ... [详细]
author-avatar
这个昵称能用嘛
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有