We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最近抽空看了看移动端适配的一些文章,也结合自己的经验做一下总结以及对比。
那么,开始正题,首先说说到目前位置出现的一些关于移动端适配的技术方案:
CSS3
meida queries
flex
rem
viewport
meida queries 的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:
css
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/ }
media query
Bootstrap
Flex
以天猫的实现方式进行说明:
它的viewport是固定的:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死,宽度自适应,元素都采用px做单位。
px
随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。DEMO>>
这也是淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。
根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.
dpr
1/dpr
这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width。这个device-width的计算公式为:
device-width
设备的物理分辨率/(devicePixelRatio * scale),在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio 。
设备的物理分辨率/(devicePixelRatio * scale)
scale
device-width = 设备的物理分辨率/devicePixelRatio
具体请查看 https://github.com/amfe/lib-flexible 或 https://www.npmjs.com/package/anima-hd.
说说我司【魅族】移动端的实现方式,viewport也是固定的:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。
通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)
720px
css通过sass预编译,设置量取的px值转化rem的变量$px: (1/100)+rem;;
sass
$px: (1/100)+rem;
具体实现方案可以查看 >> mpx2rem
上面说到的淘宝的实现方式即rem+viewport 缩放来实现。
transform: scale(0.5)
CSS代码:
CSS
div{ width: 1px; height: 100%; display: block; border-left: 1px solid #e5e5e5; -webkit-transform: scaleX(.5); transform: scaleX(.5); }
缺点:
box-shadow
实现方法:
利用CSS对阴影处理的方式实现0.5px的效果。
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点:
基本所有场景都能满足,包含圆角的button,单条,多条线。
rgba(0,0,0,1)
使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。
background-image
linear-gradient
base64
渐变 linear-gradient (50%有颜色,50%透明)
单条线:
div { height: 1px; background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%); background-position: top left; background-repeat: no-repeat background-size: 100% 1px; }
多条线:
div { background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%); background-size: 100% 1px,100% 1px,1px 100%,1px 100%; background-repeat: no-repeat; background-position: top left, bottom left, left top, right top; }
优点:
缺点:
The text was updated successfully, but these errors were encountered:
No branches or pull requests
最近抽空看了看移动端适配的一些文章,也结合自己的经验做一下总结以及对比。
那么,开始正题,首先说说到目前位置出现的一些关于移动端适配的技术方案:
CSS3
的meida queries
flex
弹性布局rem
+viewport
缩放rem
方式Meida Queries
meida queries
的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的css
代码,最终达到界面的配置。核心语法是:优点
media query
可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap
等框架使用这种方式布局缺点
Flex
弹性布局以天猫的实现方式进行说明:
它的
viewport
是固定的:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死,宽度自适应,元素都采用
px
做单位。随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。DEMO>>
rem
+viewport
缩放这也是淘宝使用的方案,根据屏幕宽度设定
rem
值,需要适配的元素都使用rem
为单位,不需要适配的元素还是使用px
为单位。实现原理
根据
rem
将页面放大dpr
倍, 然后viewport
设置为1/dpr
.viewport
设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是
device-width
。这个device-width
的计算公式为:设备的物理分辨率/(devicePixelRatio * scale)
,在scale
为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio
。具体请查看 https://github.com/amfe/lib-flexible 或 https://www.npmjs.com/package/anima-hd.
rem
实现说说我司【魅族】移动端的实现方式,
viewport
也是固定的:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
。通过代码来控制
rem
基准值(设计稿以720px
宽度量取实际尺寸)css
通过sass
预编译,设置量取的px
值转化rem
的变量$px: (1/100)+rem;
;具体实现方案可以查看 >> mpx2rem
1像素边框高清
淘宝实现方式
上面说到的淘宝的实现方式即
rem
+viewport
缩放来实现。transform: scale(0.5)
CSS
代码:缺点:
box-shadow
实现方法:
利用CSS对阴影处理的方式实现0.5px的效果。
优点:
基本所有场景都能满足,包含圆角的button,单条,多条线。
缺点:
rgba(0,0,0,1)
最深的情况了。有阴影出现,不好用。box-shadow
可能会导致性能瓶颈。图片实现
使用
background-image
实现1px有两种方式: 渐变linear-gradient
或直接使用图片(base64
)。渐变
linear-gradient
(50%有颜色,50%透明)单条线:
多条线:
优点:
缺点:
The text was updated successfully, but these errors were encountered: