如果做网站赚钱,什么公司做企业网站,建设工程施工包括哪些工程,高唐建筑公司网站研究了淘宝#xff0c;天猫和网易彩票163的wap主页样式布局#xff0c;总结移动端布局方案 注意#xff1a;代码运行是file协议#xff0c;在chrome里不支持引用本地文件#xff0c;会提示跨域错误#xff0c;可以用firefox或者Safari打开
当时做的ppt下载: 2015年12月移…研究了淘宝天猫和网易彩票163的wap主页样式布局总结移动端布局方案 注意代码运行是file协议在chrome里不支持引用本地文件会提示跨域错误可以用firefox或者Safari打开
当时做的ppt下载: 2015年12月移动端布局方案探究
一、基本概念
1. 物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元
2. 设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)可以认为是计算机坐标系统中得一个点这个点代表一个可以由程序使用的虚拟像素(比如: CSS像素)
3. 位图像素
一个位图像素是栅格图像(如png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如显示位置颜色值透明度等)
4. 设备像素比(简称dpr)
设备像素比 物理像素 / 设备独立像素在某一方向上x方向或者y方向
5. scale
缩放比scale 1/dpr
6. 完美视口
meta nameviewport contentinitial-scale1,widthdevice-width,user-scalable0,maximum-scale1 /二、网易彩票设计方案
网易彩票
采用scale 1.0写死viewport采用媒体查询来确定html根元素的font-size值即rem值rem 百分比布局
媒体查询的css代码如下
//网易彩票的响应式布局是采用媒体查询来改变rem值实现的
//媒体查询css
#media-query{media screen and (min-width: 240px) {html,body,button,input,select,textarea {font-size:9px!important;}}media screen and (min-width: 320px) {html,body,button,input,select,textarea {font-size:12px!important;}}media screen and (min-width: 374px) {html,body,button,input,select,textarea {font-size:14px!important;}}media screen and (min-width: 400px) {html,body,button,input,select,textarea {font-size:15px!important;}}// 省略
}
三、天猫设计方案
天猫首页
采用scale 1.0写死viewport不采用rembody的font-size14px写死px flexbox布局
四、遇到的问题
1. 高清屏下 dpr1 1px线模糊问题
大多数情况下设计师产出各种尺寸的稿子都是先画出大尺寸一般2x的稿子再去缩小尺寸最后导出。 这样会带来问题如果设计师在2倍稿子里画了一条1px的线例如border1px这时候假如我们要在scale1.0里呈现的话就会变成0.5px而很大一部分手机是无法画出0.5px的。 理论上1个位图像素对应于1个物理像素图片才能得到完美清晰的展示。在普通屏幕下是没有问题的但是在retina屏幕dpr2下就会出现位图像素点不够从而导致图片模糊的情况。 2. 高清屏下 dpr1 高清图片模糊问题
对于dpr2的retina屏幕而言1个位图像素对应于4个物理像素由于单个位图像素不可以再进一步分割所以只能就近取色从而导致图片模糊(注意上述的几个颜色值)。所以对于图片高清问题比较好的方案就是采用两倍图片。如200×300(css pixel)img标签就需要提供400×600的图片。 对于dpr2的retina屏幕而言1个位图像素对应于4个物理像素由于单个位图像素不可以再进一步分割所以只能就近取色从而导致图片模糊(注意上述的几个颜色值)。所以对于图片高清问题比较好的方案就是采用两倍图片。如200×300(css pixel)img标签就需要提供400×600的图片。 五、终极解决方案--淘宝设计方案
淘宝首页
通过js处理获取手机dpr参数然后动态生成viewpoint获取手机物理像素宽度分成10份每一份的宽度即是rem的尺寸。根据设计稿的尺寸px分三种情况进行处理采用px rem布局
相关的脚本如下
$(document).ready(function(){var dpr, rem, scale;var docEl document.documentElement;var fontEl document.createElement(style);var metaEl document.querySelector(meta[nameviewport]);var view1 document.querySelector(#view-1);if(window.screen.width 540){dpr window.devicePixelRatio || 1;scale 1 / dpr;rem docEl.clientWidth * dpr / 10;}else{dpr 1;scale 1;rem 54;}
//貌似最新的淘宝网站又去掉了只是限制了主体内容的宽度// 设置viewport进行缩放达到高清效果metaEl.setAttribute(content, width dpr * docEl.clientWidth ,initial-scale scale ,maximum-scale scale , minimum-scale scale ,user-scalableno);// 设置整体div的宽高view1.setAttribute(style, width: docEl.clientWidth px; height: docEl.clientHeight px);// 设置data-dpr属性留作的css hack之用docEl.setAttribute(data-dpr, dpr);// 动态写入样式docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML html{font-size: rem px!important;};$(body).attr(style, font-size: dpr * 12 px);// 给js调用的某一dpr下rem和px之间的转换函数window.rem2px function(v) {v parseFloat(v);return v * rem;};window.px2rem function(v) {v parseFloat(v);return v / rem;};window.dpr dpr;window.rem rem;
})
六、设计方案总结
从以上的分析我们不难看出
网易彩票的方案上手快开发效率高兼容性好但是不够灵活和精细天猫的设计思路比较简单flexbox非常灵活但是flexbox的兼容性方面需要好好处理不够精细淘宝的方案几乎解决了移动端遇到的所有问题堪称完美的解决方案但是开发效率低、成本比较高。
欢迎大家star学习交流github地址 | 我的博客
参考文献
移动前端开发之viewport的深入理解【原创】移动端高清、多屏适配方案wap手机端页面根据dpr和宽度计算出font-size对应数值less语法
