移动端适配
2021/6/15 10:22:45
本文主要是介绍移动端适配,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
移动端适配
- 一、viewport 适配
- 二、rem 适配
- rem 适配方法一
- rem 适配方法二
- 三、less + rem 适配
一、viewport 适配
- 拿到设计稿之后,设置布局视口宽度为设计稿宽度,然后量尺寸进行布局即可。
<meta name="viewport" content="width=设计稿宽度">
- 元素大小在不同移动设备上会等比缩放。
- 缺点:
兼容性问题
二、rem 适配
- em 和 rem :
em 参照的是父级元素的字体大小,1em = 1 父元素的 font-size
rem 参照的是根元素的字体大小,1rem = 1 html的 font-size - rem 适配策略:核心是等比缩放。直接使用rem 进行适配,有两种方法,先在一个页面中进行布局,然后通过JS 适配不同屏幕。
rem 适配方法一
- 设置完美视口
- 假如在设计稿宽度为375 的页面中,设置html 的font-size =100px
- 设置页面元素的大小,单位转化为 rem
- 增加 JS 代码进行页面适配,设置不同设备的font-size 。
其他移动设备中,html 的 font-size=设备布局视口宽度 * 100 / 375 px
rem 适配方法二
- 设置完美视口
- 设置html 的 font-size 为与设计稿宽度成比例的值,如采用 10 : 1 (即布局视口宽度 : font-size = 10 : 1)的比例,设计稿宽度 375时,font-size =37.5px
- 设置页面元素大小,转化为 rem 单位
- 通过 JS 代码进行页面适配,设置不同屏幕的 font-size 。
其他设备中,html 的 font-size=设备布局视口宽度 / 10 px
三、less + rem 适配
- 适配策略:采用成比例尺寸的font-size 的适配策略。
- 设置完美视口
- 通过 JS 进行页面适配,设置不同屏幕html 的font-size 值。
font-size=布局视口宽度 / 比例值,假定采用比例10 : 1
- 在less 中定义变量 @font-size 表示html的 font-size,@font-size=(375 / 10 rem)(这里的“ rem ”只表示单位,与font-size 无关)
- less 中设置元素样式,并转换为rem 单位,大小=原本大小 / @font-size 。
注意:less 语言中除法要加括号,如@font-size=(375/100rem),width=(375/@font-size)
(完)
这篇关于移动端适配的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现