从网易与淘宝的font

  • 时间:
  • 浏览:0
  • 来源:1分6合平台-1分彩娱乐平台_1分快3官网平台

阅读目录

  • 1. 大大问题 的引出
  • 2. 简单大大问题 简单出理
  • 3. 网易的做法
  • 4. 淘宝的做法
  • 5. 比较网易与淘宝的做法
  • 6. 如保与设计协作
  • 7. 总结

文/流云诸葛

本文结合当时人对网易与淘宝移动端首页html元素上的font-size這個属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的大大问题 ,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评。

1. 大大问题 的引出

最近阅读白树的博文《移动web资源架构设计 》时,他在博文带有一段指出,日后html5要适应各种分辨率的移动设备,应该使用rem原来的尺寸单位,一齐给出了一段针对各个分辨率范围在html上设置font-size的代码:

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px)
{html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px)
{html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px)
{html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px)
{html{font-size:22.5px}}

@media screen and (min-width:7400px) and (max-width:799px)
{html{font-size:23.5px}}

@media screen and (min-width:4000px)
{html{font-size:25px}}

在实际项目中,把与元素尺寸有关的css,如width,height,line-height,margin,padding等都以rem作为单位,原来页面在不同设备下就能保持一致的网页布局。举例来说,网页有4个多 .item类,设置了width为3.4rem,该类在不同分辨率下对应的实际深度图如下:

321px <= device-width <= 375px,font-size:11px        --->  .item的width:34px

376px <= device-width <= 414px,font-size:12px ---> .item的width:37.4px

415px <= device-width <= 639px,font-size:15px ---> .item的width:40.8px

640px <= device-width <= 719px,font-size:20px ---> .item的width:51px

720px <= device-width <= 749px,font-size:22.5px ---> .item的width:76.5px

7400px <= device-width <= 799px,font-size:23.5px ---> .item的width:79.8999999px

4000px <= device-width ,font-size:25px ---> .item的width:85px

以上代码乍看没啥大大问题 ,响应式设计不就应该是这么干的吗?日后从工作量和复杂化度方面来考虑,它有以下几个缺乏:

  • (1).item类在所有设备下的width都是3.4rem,但在不同分辨率下的实际像素是不一样的,可是在一些分辨率下,width的界面效果不一定共要,有日后太宽,有日后太窄,这日后就要对width进行调整,这么就时要针对.item写媒介查询的代码,为该分辨率重新设计4个多 rem值。然而,这里有7种媒介查询的具体情况,css又有可是跟尺寸相关的属性,哪个属性在哪个分辨率范围不共要都是不定的,最都是原因要写可是的媒介查询可不都可以适配所有设备,日后在写的日后rem都得根据某个分辨率html的font-size去算,這個计算可不见得每次都这么容易,比如40px / 23.5px,這個rem值口算没了来吧!由此可见这其中的麻烦有几个。
  • (2)以上代码中给出的7个范围下的font-size不一定是共要的,这7个范围可是一定共要,实际有日后不时要这么多,可是找出哪些个范围,以及每个范围最共要的font-size也很麻烦
  • (3)设计稿都是以分辨率来标明尺寸的,前端在根据设计稿里各个元素的像素尺寸转换为rem时,该以哪个font-size为准呢?这时要去写可不都可以知道。

正是日后以上提到的一些缺乏,我嘴笨 這個适配方法都是很糙好,写起来太麻烦。为了完成工作,当你们 时要找寻更简单更有下行速度 的方法。这么html5该如保去做众多移动设备的适配呢?我目前已知的有3种出理 方法,日后在下文的第2,3,4次要阐述,日后你阅读日后,哪些想法,尽可在评论中与我交流。

2. 简单大大问题 简单出理

我嘴笨 一些web app并一定很复杂化,比如拉勾网,你看看它的页面在iphone4,iphone6,ipad下的样子就知道了:

它的页面有4个多 特点,可是:

  • 顶部与底部的bar不管分辨率为甚会 变,它的深度图和位置都是变
  • 上端每条招聘信息不管分辨率为甚会 变,招聘公司的图标等信息都发生条目的左边,薪资都发生右边

這個app是五种典型的弹性布局:关键元素高宽和位置都是变,非要容器元素在做伸缩变换。对于相似app,记住4个多 开发原则就好:文字流式,控件弹性,图片等比缩放。以图描述:

這個规则是一套基本的适配规则,对于這個简单app来说日后足够,一齐它也是上端要说的rem布局的基础。另外对于拉勾這個app日后时要额外媒介查询对布局进行调整的可是小屏幕设备。举例来说,日后现在可是设计稿是根据iphone6的尺寸来的,而iphon6设备宽的逻辑的像素是375px,而iphone4的逻辑像素是320个像素,可是日后你根据设计稿做出来的东西,在iphone4上端日后显示不下,比如说拉钩网底部那个下载框,你对比看下就知道了,这是4:

这是6:

6下面两边的间距比4多可是,说明拉勾对4肯定是做过适配的,从代码可不都可以能证实這個点:

不过日后你拿到的是根据4的设计稿,那就这么大大问题 ,比4分辨率大的设备肯定能显示根据4的尺寸做出来的东西。

还有一些,這個具体情况css尺寸单位用px就好,何必 用rem,出理 增加复杂化度。

有好的文章希望站长之家帮助分享推广,猛戳这里我日后投稿