从网易与淘宝的font

  • 时间:
  • 浏览:1
  • 来源:1分6合-1分6合平台_1分6合网投平台

阅读目录

  • 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:7500px) and (max-width:799px)
{html{font-size:23.5px}}

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

在实际项目中,把与元素尺寸有关的css,如width,height,line-height,margin,padding等都以rem作为单位,从前页面在不同设备下就能保持一致的网页布局。举例来说,网页另另多少多.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

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

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

以上代码乍看没啥问题报告 ,响应式设计不就应该是那末干的吗?否则从工作量和繁复度方面来考虑,它有以下多少不足:

  • (1).item类在所有设备下的width否是3.4rem,但在不同分辨率下的实际像素是不一样的,一些在一些分辨率下,width的界面效果不一定大概,有不可能 太宽,有不可能 太窄,这还会 就要对width进行调整,那末就都要针对.item写媒介查询的代码,为该分辨率重新设计另另多少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下的样子就知道了:

它的页面另另多少多特点,可是我我:

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

你你是什么app是并否是典型的弹性布局:关键元素高宽和位置否是变,只能容器元素在做伸缩变换。对于同类app,记住另另多少开发原则就好:文字流式,控件弹性,图片等比缩放。以图描述:

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

这是6:

6下面两边的间距比4多一些,说明拉勾对4肯定是做过适配的,从代码也可不能否证实你你是什么点:

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

还有一些,你你是什么情况css尺寸单位用px就好,何必 用rem,防止增加繁复度。

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