0

0

淘宝网触屏版为什么rem跟px混用?有什么好处?为什么不都用rem?

php中文网

php中文网

发布时间:2016-06-07 08:42:59

|

2489人浏览过

|

来源于php中文网

原创

回复内容:

自荐两篇文章:

移动端适配方案(上) · Issue #17 · riskers/blog · GitHub
移动端适配方案(下) · Issue #18 · riskers/blog · GitHub

还有一个分享时的PPT:

移动端页面适配方案

希望能够对你帮助 就如 刘宁(知乎好多刘宁,手机艾特一下翻了好几页没找到) 所说,不是所有元素都需要缩放的。

最容易举例的就是1px的border,无论什么屏,无论像素密度多少,都要准确的显示1物理像素(物理像素与逻辑像素与像素密度请咨询谷大哥)。

淘宝目前的做法即是,通过脚本检测设备的像素密度,再设置文档的根font-size与viewport的缩放值,从而让px能够准确的显示为物理像素。

讲的比较乱,回头再更

@mablevi自由就好
我们的做法是:获取设备像素密度后,设置根节点的fontSize,然后文档中全部使用rem+px结合。
window.onload = function () {
    var nameAttr = document.createAttribute('name');
    nameAttr.value = 'viewport';
    var contentAttr = document.createAttribute('content');
    var dpr = window.devicePixelRatio || 1;
    contentAttr.value = 'width=device-width,initial-scale=' + (1 / dpr) + ',target-densitydpi=device-dpi,user-scalable=no';
    var element = document.createElement('meta');
    element.attributes.setNamedItem(nameAttr);
    element.attributes.setNamedItem(contentAttr);
    document.head.appendChild(element);
    document.getElementsByTagName('html')[0].style.fontSize = (16 * dpr) + 'px';
};
在页面交互,视觉设计上,不是所有元素的大小都是需要跟随设备尺寸不同而变换的。

rem单位会出现一些边界情况。比如,雪碧图背景的元素使用rem就会掉入一两个像素的偏差的陷阱。

其次不明白手淘为啥使用脚本去捕获当前设备的尺寸大小来设置根的font-size。我比较推荐使用mediaquery断点形式去设置font-size,因为那样更自然。 可能是开发过程中,开始使用rem来尝试做适应吧,基于以前的一些代码,慢慢替换. 用MX4的同学访问手淘触屏版有异常么?
前天测试的时候 alert出screen.width 的数值是物理分辨率的数值。
没百度到这个问题,就我一人遇到么。。。。 移动端适配等式:
设备宽度/设计稿宽度 = 某个元素某一距离实际值/该元素在设计稿的值
例子:
一个5s宽度320/设计稿宽度640 = 一个元素的高度未知/设计稿上它的高度为20


可以推出它的实际高度为10,通常我们使用rem作为等式前的值,但是因为太小无法作为html根字体大小使用,所以适当放大,通常为了方便计算,放大100倍,即为:
document.documentElement.fontSize = document.documentElement.clientWidth / 640 (或实际设计稿宽度) * 100
那么此时在设计稿上量的的某一距离,比如43px,就等于0.43rem。


至于文字,我们通常不用rem,因为由于不同的rem计算方式会产生很多奇怪的大小,使得文字出现糊掉或者模糊的情况,通常我们使用媒体查询事先设置好body的字体大小,这样来确保文字的正常显示。
即为:rem处理适配距离的问题,em处理文字大小问题。


详见:
chengfeilong.com/mobile 我是winter,匿名答。

rem用于随屏幕伸缩的尺寸。px用于正文文字大小、细边框等不宜随屏幕伸缩的尺寸。

考虑到字体的点阵信息,一般文字尺寸多会采用 16px 20px 24px等值,若以rem指定文字尺寸,会产生诸如21px,19px这样的值,会导致字形难看,毛刺,甚至黑块,故大部分文字应该以px设置。

一般标题类文字,可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30px的话,也可以用rem设置字体。

那个百姓网的刘宁同学,Android有多少种尺寸你造么…… 其实是中间采用了两个库:lib-flexible.js和scroll.js,其中lib-flexible采用rem,而scroll.js模拟滚动采用的px,这个要问下作者了 @winter 关于这个问题,有一篇专门的文章在这里,自己看:div.io/topic/1092
淘宝
淘宝

淘宝是一个好逛、丰富、有趣的消费生活社区,每天有亿万消费者来淘宝“逛街”:发现好物、找到乐趣、表达体验……淘宝能满足人们生活中的各种需求,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号