React 前端导航

移动端适配方案

移动端适配方案

在阅读之前,我们希望您对一下基本概念有一些了解,例如硬件概念:屏幕尺寸,屏幕分辨率,设备像素,像素密度;系统概念:显示分辨率,设备独立像素,逻辑分辨率;浏览器中的概念:设备像素比,视口。如对这些基础概念没有了解的,可先阅读:移动端适配基础概念

媒体查询,响应式布局

css提供了@media媒体查询设置不同的样式,根据不同平布设不同的样式,从而达到不同屏幕适配的目的。

不同屏幕加载不同的样式文件

<link media="(max-width: 600px)" href="./path/mobile.css" rel="stylesheet" />
<link media="(min-width: 980px)" href="./path/pc.css"  rel="stylesheet"/>

CSS 样式表中的媒体查询

@media screen and (max-width:1024px){
  div{
    font-size: 64px;
  }
}
@media screen and (max-width: 400px){
  div{
    font-size: 58px;
  }
}

媒体查询语法规则及更多实例参考:https://www.runoob.com/cssref/css3-pr-mediaquery.html

动态rem

rem是css中的一个相对长度单位,它的大小有根元素(html)字体大小决定。

针对不同的屏幕,我们可以动态的修改根元素的字体大小,页面内元素的大小也会跟着同比例改变,以此达到适配效果。

实际开发中我们可以利用工具帮助我们将px转换为rem,例如postcss-px2rem,这样我们就可以直接按照设计稿写px即可。

当然,布局使用rem问题已经解决,那么文字字号如何实现适配?也是用rem吗?答案是NO!,文字字号不建议使用rem.
比如:我们在 iPhone3G 和 iPhone4 的 Retina 屏下面,希望看到的文本字号是相同的。也就是说,我们不希望文本在 Retina 屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是 16px 和 24px,所以我们不希望出现 13px 和 15px 这样的奇葩尺寸。如此一来,就决定了在制作 H5 的页面中,rem 并不适合用到段落文本。

总结
1.meta 标签设置 viewport 宽度为屏幕宽度;
2.针对不同屏幕修改根元素(html)的 font-size 大小,一般设置为屏幕宽度的十分之一(引入 lib-flexible 库或者自己写相应逻辑);
3.开发环境配置 postcss-px2rem 或者类似插件;
4.根据设计稿写样式,元素宽高直接取设计稿宽高即可,单位为 px,插件会将其转换为 rem;
5.段落文本也按照设计稿写,单位为px,不需要转换为 rem;

视口单位:vw、vh、vmin、vmax

视口单位有:vw、vh、vmin和vmax。vw 单位表示根元素宽度的百分比,1vw 等于视口宽度的1%。

vw 适配方案的流程:

1.meta 标签设置 viewport 宽度为屏幕宽度;
2.开发环境配置 postcss-px-to-viewport 或者类似插件;
3.根据设计稿写样式,元素宽高直接取设计稿宽高即可,单位为 px,插件会将其转换为 vw;
4.段落文本也按照设计稿写,单位为px,不需要转换为 vw;

固定视口宽度,页面整体缩放

<meta name="viewport" content="width=device-width, user-scalable=no" />

这种方案,其实相当于将页面整体缩放。其本质上是对页面进行线性缩放来适应不同大小的屏幕。这种方案对于一定尺寸范围内的设备是可以的。这种方案简单方便,但如果想开发出跨越平板和手机的界面则不太合适。因为手机和平板屏幕尺寸差异太大,会导致缩放太大、界面元素显得不太和谐。这种方案适用于一些简单的活动页,或者对页面适配要求不高的页面。

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/6

#移动适配#布局