莆田中小企业网站制作,网站内做链接,网页制作教程 基础,如何申请域名创建一个网站方案#xff1a; 固定一个某些宽度#xff0c;使用一个模式#xff0c;加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem1. 简单问题简单解决 我觉得有些web app并一定很复杂#xff0c;比如拉勾网#xff0c;你看看它的页面在iphone4,iphone6,ipad… 方案 固定一个某些宽度使用一个模式加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem1. 简单问题简单解决 我觉得有些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避免增加复杂度。 2. 网易的做法 先来看看网易在不同分辨率下呈现的效果 从上面几张图可以看出随着分辨率的增大页面的效果会发生明显变化主要体现在各个元素的宽高与间距。375*680的比320*680的导航栏明显要高。能够达到这种效果的根本原因就是因为网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位比如你看导航栏的高度设置代码 可是在本文第1部分提到使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦网易是如何解决的呢最根本的原因在于网易页面上html的font-size不是预先通过媒介查询在css里定义好的而是通过js计算出来的所以当分辨率发生变化时html的font-size就会变不过这得在你调整分辨率后刷新页面才能看得到效果。你看代码就知道为啥font-size是直接写到html的style上面的了js设置的原因 它是根据什么计算的这就跟设计稿有关了拿网易来说它的设计稿应该是基于iphone4或者iphone5来的所以它的设计稿竖直放时的横向分辨率为640px为了计算方便取一个100px的font-size为参照那么body元素的宽度就可以设置为width: 6.4rem于是html的font-sizedeviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则可得出本部分开始的四张截图中html的font-size大小如下 deviceWidth 320font-size 320 / 6.4 50px
deviceWidth 375font-size 375 / 6.4 58.59375px
deviceWidth 414font-size 414 / 6.4 64.6875px
deviceWidth 500font-size 500 / 6.4 78.125px 事实上网易就是这么干的你看它的代码就知道body元素的宽是 根据这个可以肯定它的设计稿竖着时的横向分辨率为640。然后你再看看网易在分辨率为320*680375*680414*680500*680时html的font-size是不是与上面计算的一致 320*680 375*680 414*680 500*680 这个deviceWidth通过document.documentElement.clientWidth就能取到了所以当页面的dom ready后做的第一件事情就是 document.documentElement.style.fontSize document.documentElement.clientWidth / 6.4 px; 这个6.4怎么来的当然是根据设计稿的横向分辨率/100得来的。下面总结下网易的这种做法 1先拿设计稿竖着的横向分辨率除以100得到body元素的宽度 如果设计稿基于iphone6横向分辨率为750body的width为750 / 100 7.5rem
如果设计稿基于iphone4/5横向分辨率为640body的width为640 / 100 6.4rem 2布局时设计图标注的尺寸除以100得到css中的尺寸比如下图播放器高度为210px写样式的时候css应该这么写height: 2.1rem。之所以取一个100作为参照就是为了这里计算rem的方便3在dom ready以后通过以下代码设置html的font-size: document.documentElement.style.fontSize document.documentElement.clientWidth / 6.4 px; 6.4只是举个例子如果是750的设计稿应该除以7.5。4font-size可能需要额外的媒介查询并且font-size不能使用rem如网易的设置 media screen and (max-width:321px){.m-navlist{font-size:15px}
}media screen and (min-width:321px) and (max-width:400px){.m-navlist{font-size:16px}
}media screen and (min-width:400px){.m-navlist{font-size:18px}
} 最后还有2个情况要说明 第一如果采用网易这种做法视口要如下设置 //code from http://caibaojian.com/mobile-responsive-example.html
meta nameviewport contentinitial-scale1,maximum-scale1, minimum-scale1 第二当deviceWidth大于设计稿的横向分辨率时html的font-size始终等于横向分辨率/body元素宽 640*680 641*680 之所以这么干是因为当deviceWidth大于640时则物理分辨率大于1280这就看设备的devicePixelRatio这个值了应该去访问pc网站了。事实就是这样你从手机访问网易看到的是触屏版的页面如果从pad访问看到的就是电脑版的页面。如果你也想这么干只要把总结中第三步的代码稍微改一下就行了 var deviceWidth document.documentElement.clientWidth;
if(deviceWidth 640) deviceWidth 640;
document.documentElement.style.fontSize deviceWidth / 6.4 px; 3. 淘宝的做法 看看淘宝在不同分辨率下呈现的效果 淘宝的效果跟网易的效果其实是类似的随着分辨率的变化页面元素的尺寸和间距都相应变化这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前先来了解一点关于viewport的知识通常我们采用如下代码设置viewport: meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno 这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小也就是device-width。这个device-width的计算公式为 设备的物理分辨率/(devicePixelRatio * scale)在scale为1的情况下device-width 设备的物理分辨率/devicePixelRatio 。 devicePixelRatio称为设备像素比每款设备的devicePixelRatio都是已知并且不变的目前高清屏普遍都是2不过还有更高的比如2.5, 3 等我魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置 在devicePixelRatio为2的时候scale为0.5 在devicePixelRatio为3的时候scale为0.3333 这么做目的当然是为了保证页面的大小与设计稿保持一致了比如设计稿如果是750的横向分辨率那么实际页面的device-width以iphone6来说也等于750这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下 var scale 1 / devicePixelRatio;
document.querySelector(meta[nameviewport]).setAttribute(content,initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno); 淘宝布局的第二个要点就是html元素的font-size的计算公式font-size deviceWidth / 10 接下来要解决的问题是元素的尺寸该如何计算比如说设计稿上某一个元素的宽为150px换算成rem应该怎么算呢这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的他们用的设计稿是750的所以html的font-size就是75如果某个元素时150px的宽换算成rem就是150 / 75 2rem。总结下淘宝的这些做法 1动态设置viewport的scale var scale 1 / devicePixelRatio;
document.querySelector(meta[nameviewport]).setAttribute(content,initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno); 2动态计算html的font-size document.documentElement.style.fontSize document.documentElement.clientWidth / 10 px; 3布局的时候各元素的css尺寸设计稿标注尺寸/设计稿横向分辨率/104font-size可能需要额外的媒介查询并且font-size不使用rem这一点跟网易是一样的。最后还有一个情况要说明跟网易一样淘宝也设置了一个临界点当设备竖着时横向物理分辨率大于1080时html的font-size就不会变化了原因也是一样的分辨率已经可以去访问电脑版页面了。 关于这种做法的具体实现淘宝已经给我们提供了一个开源的解决方案具体请查看 https://github.com/amfe/lib-flexible 之前没有找到这相关的资料实在不好意思 4. 比较网易与淘宝的做法 共同点 都能适配所有的手机设备对于pad网易与淘宝都会跳转到pc页面不再使用触屏版的页面都需要动态设置html的font-size布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来由于html的font-size是动态调整的所以能够做到不同分辨率下页面布局呈现等比变化容器元素的font-size都不用rem需要额外地对font-size做媒介查询都能应用于尺寸不同的设计稿只要按以上总结的方法去用就可以了不同点 淘宝的设计稿是基于750的横向分辨率网易的设计稿是基于640的横向分辨率还要强调的是虽然设计稿不同但是最终的结果是一致的设计稿的尺寸一个公司设计人员的工作标准每个公司不一样而已淘宝还需要动态设置viewport的scale网易不用最重要的区别就是网易的做法rem值很好计算淘宝的做法肯定得用计算器才能用好了 。不过要是你使用了less和sass这样的css处理器就好办多了以淘宝跟less举例我们可以这样编写less //定义一个变量和一个mixin baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(name, px){{name}: px / baseFontSize * 1rem;
}//使用示例 .container {.px2rem(height, 240);
}//less翻译结果
.container {height: 3.2rem;
} 5. 如何与设计协作 前端与设计师的协作应该是比较简单的最重要的是要规范设计提供给你的产物通常对于前端来说我们需要设计师提供标注尺寸后的设计稿以及各种元素的切图文件有了这些就可以开始布局了。考虑到Retina显示屏以及这么多移动设备分辨率却不一样的问题那么设计师应该提供多套设计稿吗从网易和淘宝的做法来看应该是不用了我们可以按照设计稿先做出一套布局按照以上方法做适配由于是等比适配所以各个设备的视觉效果差异应该会很小当然也排除不了一些需要媒介查询特殊处理的情况这肯定避免不了的。下面这张图是淘宝设计师分享的他们的工作流程 解释一下就是 第一步视觉设计阶段设计师按宽度750pxiphone 6做设计稿除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿在1125px的稿子里切图。 第二步输出两个交付物给开发工程师一个是程序用到的3x切图资源另一个是宽度750px的设计标注图。 第三步开发工程师拿到750px标注图和3x切图资源完成iPhone 6375pt的界面开发。此阶段不能用固定宽度的方式开发界面得用自动布局auto layout方便后续适配到其它尺寸。 第四步适配调试阶段基于iPhone 6的界面效果分别向上向下调试iPhone 6 plus414pt和iPhone 5S及以下320pt的界面效果。由此完成大中小三屏适配。 注意第三步就要使用我们以上介绍的网易跟淘宝的适配方法了。假如公司设计稿不是基于750的怎么办其实很简单按上图做一些相应替换即可但是流程和方法还是一样的。解释一下为什么要在3x的图里切这是因为现在市面上也有不少像魅蓝note这种超高清屏幕devicePixelRatio已经达到3了这个切图保证在所有设备都清晰显示。 6. 总结 这篇文章对我来说价值也很大今后做html5的项目就有思路了本文提到的三种方法将来肯定都有用武之地。 转载 https://blog.csdn.net/qq_34020571/article/details/78923089转载于:https://www.cnblogs.com/liuranRan/p/11178066.html
