html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结.
网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿...
我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够。
今天就研究一下各大互联网公司对于移动端页面的处理方式。
- 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp
- 主要研究点:viewport的设置,字体的设置,图片原始宽高设置
汝甚吊,令尊知否?
咦?target-densitydpi呢?
网上有老复杂的计算,针对不同的屏幕分辨率,通过公式计算出不同结果再用JS输出到viewport上,各种云云, 我只想说:汝甚吊,令尊知否
google现在也已经不建议使用target-densitydpi这一属性,webkit中已移除了,请看这里
http://trac.webkit.org/changeset/119527
现代移动端网站的最佳实践
我看了BAT的移动端页面中,现在是没有target-densitydpi这个东西了。
最佳实践:
1、在viewport中将width设置为device-width, 如:
<meta name="viewport" content="width=device-width">
2、并且将网页设计成自适应方式
先有再优才是王道
CSS中关于分辨率宽度设置:
宽度可以使用320px为标准,图片宽度可以以640px为标准。
这样一方面兼容了低分辨率的低端机,一方面兼容了高分辨率的高端机,缺点是可能会浪费些流量,但开发效率上来讲那是极好的,要保证。
字体单位设置
几个网站中大概使用了以下几个单位
Fontsize单位:px, em, %, rem
只有淘宝首页使用了rem这个单位,果然是淘宝的UED比较喜欢尝试新的东西,这个单位是CSS3中新加入的,结合了em与px的优点,摒弃了em与px的(不易操控)缺点
关于字体单位详细介绍可以参考这片文章
http://www.w3cplus.com/css3/define-font-size-with-css3-rem
Viewport中的initial-scale值
除淘宝首页的initial-scale设置了0.5,iphone4下相当于640宽度分辨率。
其它的initial-scale均是1.0的设置,即iphone4下320宽度的分辨率,包括淘宝内页或则其内部的天猫,微淘等频道或产品。
各移动端网站截图说明
以下是各移动端网站页面initial-scale值、字体、间距等
淘宝首页
0.5缩放,所以它的边距设置的是24px但实际视觉上看到的像素是12px
淘宝聚划算频道
天猫
蘑菇街
腾讯QQ官方
QQ空间
百度首页
百度音乐
结束语
我只是简单的对BAT巨头们的移动端网站,在chrome浏览器debug模拟器的查看了它们相应的HTML及CSS
对于移动端页面布局方面我应该也算是新手,新手上路... 大家多躲躲我,免得追尾了。
我水平有限,此文仅供参考,欢迎讨论
========================================================
转载处请注明:博客园(王二狗)willian12345@126.com
html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式的更多相关文章
- 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应
rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...
- eclipse护眼颜色和字体大小设置
♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preferences ...
- eclipse中的字体大小设置和背景色设置
1.字体大小设置 在basic下选择最后一个TextFont 护眼背景色设置 添加到自定义颜色后点确定 最后一步点apply
- pycharm设置开发模板/字体大小/背景颜色(3)
一.pycharm设置字体大小/风格 选择 File –> setting –> Editor –> Font ,可以看到如上界面,可以根据自己的喜好随意调整字体大小,字体风格,文字 ...
- hadoop java VM 参数设置 默认native栈大小设置
问题总结: 程序栈太小,64位机器的栈大小默认比32位的大,将程序从64放到32中执行则报错,需要修改初始堆栈大小 (.so库中提供两个函数接口,一个里面使用的是尺寸较大的图像,另一个处理的图像很小, ...
- Matplotlib字体大小设置
参考:https://blog.csdn.net/henkekao/article/details/72871882 ax = plt.subplot(111) # 设置刻度字体大小 plt.xtic ...
- 【转】IntelliJ IDEA 仿照vs2017快捷键设置,以及字体颜色设置
因后期工作需要使用java技术栈,所以近期抽空下载了intelliJ IDEA工具,但是作为一个Net开发者,在使用了vs以后,感觉在使用别的开发工具感觉就是没法和vs相比,毕竟vs被称为宇宙最强id ...
- 动态设置html根字体大小(随着设备屏幕的大小而变化,从而实现响应式)
代码如下:如果设置了根字体大小,font-size必须是rem var html =document.querySelector('html'); html.style.fontSize = docu ...
- hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.
这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...
随机推荐
- ASP.NET MVC5使用Area区域
转载:http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它 ...
- C/C++ 各种进制的表示方法/ 进制前缀
C/C++ 各种进制的表示方法/ 进制前缀 来源 https://blog.csdn.net/qq_38282836/article/details/81784112 在C/C++ 中天然的支持除10 ...
- [树链剖分]hihocoder1883
描述 有一个无向图,有n个点,m1条第一类边和m2条第二类边.第一类边有边权,第二类边无边权.请为第二类的每条边定义一个边权,使得第二类边可能全部出现在该无向图的最小生成树上,同时要求第二类边的边权总 ...
- 【转】__int64 与long long 的区别
//为了和DSP兼容,TSint64和TUint64设置成TSint40和TUint40一样的数 //结果VC中还是认为是32位的,显然不合适 //typedef signed long int ...
- AutoCompleteTextView 简单用法 实现自定义list adapter
网上有不少教程,那个提示框字符集都是事先写好的,例如用一个String[] 数组去包含了这些数据,但是,我们也可以吧用户输入的作为历史记录保存 下面先上我写的代码:import andro ...
- CF 681
我太水了...... 这是一场奇差无比的CF. A,看题意有困难,实际上还是很水的. B,枚举 1234567 和 123456 的个数,时间复杂度1e6以下 C,业界毒瘤模拟题.最TM坑的是还要输出 ...
- A1097. Deduplication on a Linked List
Given a singly linked list L with integer keys, you are supposed to remove the nodes with duplicated ...
- 面向对象——类的内置attr(三十三)
class Foo: x=1 def __init__(self,y): self.y=y def __getattr__(self, item): print('----> from geta ...
- java基础基础总结----- 常用了解java(二)
一.Java的发展历史 1998年,Java 2 Platform J2SE.J2ME.J2EE 2005年,Java10周年,重新命名: J2SE → Java SE → Standard Edit ...
- mac java jdk 安装删除
安装: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载安装双击安装 卸载: ...