• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 淘宝网触屏版为什么rem跟px混用?有什么好处?为什么不都用rem?

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您

回复内容:

自荐两篇文章:

移动端适配方案(上) · 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处理文字大小问题。


详见:
http://www.chengfeilong.com/mobile-layout 我是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 关于这个问题,有一篇专门的文章在这里,自己看:http://div.io/topic/1092

您可能想查找下面的文章:

相关文章

  • 2018-12-03HTML5注册页面示例代码
  • 2018-12-03了解HTML 5 History API的”前生今世”
  • 2018-12-03关于印刷的10篇文章推荐
  • 2017-08-0620佳惊艳的HTML5应用程序示例分享
  • 2017-08-06H5新属性audio音频和video视频的控制详解(推荐)
  • 2018-12-03如何创建 HTML5 Canvas 电信网络拓扑图
  • 2018-12-03介绍HTML5+Canvas调用手机拍照功能实现图片上传(下篇)
  • 2018-12-03CSS+HTML5的使用方法实例
  • 2018-12-03HTML5实战与剖析之自定义数据属性(dataset)
  • 2018-12-037款个性化jQuery/HTML5地图插件图文详细介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用phonegap播放音频的实现方法
    • 下载新浪微博视频和秒拍视频的方法
    • 在HTML5中如何提高网站前端性能的示例代码分析
    • 前端页面之间存取值(Html5之sessionStorage、localStorage)
    • 用HTML5 实现橡皮擦的涂抹效果的教程
    • 2小时完成HTML5拼图小游戏代码图文介绍
    • html5的应用-画一个可爱的小猫咪效果图
    • Html5实现二维码扫描并解析 _html5教程技巧
    • HTML5之HTML元素扩展(上)—新增加的元素及使用概述_html5教程技巧
    • Html5新标签datalist实现输入框与后台数据库数据的动态匹配

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有