移动端前端适配方案

栏目: CSS · 发布时间: 5年前

内容简介:首先,谈一下目前为止出现的一些关于移动端适配的技术方案:(1)通过媒体查询的方式即CSS3的meida queries(2)以天猫首页为代表的 flex 弹性布局

首先,谈一下目前为止出现的一些关于移动端适配的技术方案:

(1)通过媒体查询的方式即CSS3的meida queries

(2)以天猫首页为代表的 flex 弹性布局

(3)以淘宝首页为代表的 rem+viewport缩放

(4)rem 方式

1.Media Queries

meida queries 的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  /*你的css代码*/
}
复制代码

优点

  • media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局

  • 图片便于修改,只需修改css文件

  • 调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

  • 代码量比较大,维护不方便

  • 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源

  • 为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式

2.Flex弹性布局

以天猫的实现方式进行说明: 它的viewport是固定的

:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
复制代码

高度定死,宽度自适应,元素都采用px做单位。

随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。

3.rem布局

首先说一下,我们想要达到的自适应效果是什么。很简单:元素、字体大小能随着屏幕大小(一般相对于宽度来说)变化而变化,在大一点的屏幕上,尺寸大一些;在小一点的屏幕上,尺寸小一些;尺寸的大小和屏幕大小成正比。 最简单最直接的方案就是直接用百分比设置元素的尺寸。我们用百分比设置元素大小可以实现元素尺寸的自适应,但是无法实现字体大小的自适应,而且尺寸转化为百分比计算很麻烦,还有就是元素尺寸的高很难相对屏幕宽度设置百分比。百分比适用于某种具体场景,不是通用解决方案。

其实我们需要的是一个和屏幕宽度正相关的单位,而且这个单位要和px很容易互相转化。这样我们就可以使用这种单位进行元素尺寸和字体大小的设置。那么css中存在这种单位吗?答案是:不存在的。。。不过不要灰心,我们可以借助rem来实现这种我们需要的单位。

rem是一个相对单位,1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小,就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标:

rem单位所代表的尺寸大小和屏幕宽度成正比,也就是设置html元素的font-size和屏幕宽度成正比 rem单位和px单位很容易进行换算,方便我们按照标注稿写css

这里有一个前提,无论是设置html的font-size和屏幕宽度成正比,还是换算单位,我们都是以我们的标注稿为参考的。移动端的标注稿一般是640px(iphone5)或者750px(iphone6/7/8),现在750px用的比较多一些,我们假设标注稿是750px的。这里的750px是指设备的实际尺寸,也是UI标注稿的实际尺寸。而我们编码写的px是指css尺寸,是设备无关的尺寸,css尺寸和屏幕实际尺寸不是1比1的映射关系,而是取决于屏幕的像素密度。比如iphoneX是3倍屏,iphone8是2倍屏,但是两个的屏幕css尺寸都是375px。而实际的设备尺寸,iphonex是1125px,iphone8是750px,我们编码过程中只需要设置css尺寸,设备会自动帮我们映射实际的尺寸。我们按照标注稿写完页面之后,页面应该是可以在其他所有尺寸设备上正常自适应地显示的。

rem单位所代表的尺寸大小和屏幕宽度成正比

首先,设置rem单位所代表的尺寸大小和屏幕宽度成正比,有3中方案,先不必纠结其中的数值:

  • 媒体查询, 设定每种屏幕对应的font-size
@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
// 红米Note2
@media screen and (min-width:360px) {
	html, body, button, input, select, textarea {
		font-size:13.5px;
	}
}
@media screen and (min-width:375px) {
	html, body, button, input, select, textarea {
		font-size:14.0625px;
	}
}

复制代码
  • js设置html的font-size大小
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';


复制代码
  • 使用vw设置,vw也是一个相对单位,100vw等于屏幕宽度
html{
    font-size: 10vw;
}
复制代码

这3种方式,都可以设置html的font-size和屏幕宽度成正比。这3种的单位是css尺寸,无论第一种方法的min-width还是第二种document.documentElement.clientWidth都是相对于设备的css尺寸而言,在iphonex和iphone8得到的结果都是375px。

第一种,需要设置需要每种屏幕都设置对应的font-size,这些font-size都是根据比例算出来的,比较繁琐,而且还有可能漏掉某些屏幕尺寸,不推荐。第二种用js设置,比较方便,现在大部分网站采用这种方式。第三种通过css的vw来设置,也很方便,而且不用写css,但是兼容性还不是特别好。综合推荐使用第二种。

单位换算

现在我们要使用rem设置元素尺寸和字体大小。有两种思路:

  • 设置特殊的html的font-size,使rem和标注稿上px容易换算,比如把我们的html的font-size设置成1px,这样1rem就等于1px,因为我们标注稿750px,是基于二倍屏的,1个css单位等于2个实际单位,所以我们的font-size设置为0.5px,这样我们设置尺寸时,rem和标注稿的px,就是1比1映射的。当然这里所有的大小都是相对于标注稿尺寸来说的,如果是其他屏幕的尺寸,html的font-size肯定要相应的变大或者变小,通过第二种js方法可以实现:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';
复制代码
  • 通过css预编译或者webpack插件,实时计算 比如,我们将html根元素设置为16px,标注稿上有一个div元素宽度为100px,我们在scss中可以这样写
$rem: 32rem;

div{
	width: 100/$rem;
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网站搜索设计

网站搜索设计

[美] Shari Thurow、[美] Nick Musica / 向怡宁 / 人民邮电出版社 / 2011-4 / 35.00

本书是提高网站搜索可用性的红宝书,它将SEO 和Web 可用性两个不同领域的知识融会贯通,详细阐述了用户的各种搜索行为和行为背后的真实意图,以及网站如何迎合用户心理,以便提供令其满意的内容,进而实现网站所有者的商业目标。 本书不仅仅是SEO 专业人员和Web 可用性人员的参考必备,同时更可为网络文案、设计开发人员、营销专员以及网站所有者、管理者等其他Web 领域从业人员拓展视野、补强技能。一起来看看 《网站搜索设计》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具