HTML中移动端有什么布局方案

这篇文章给大家分享的是有关HTML中移动端有什么布局方案的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
　　注意：代码运行是file协议，在chrome里不支持引用本地文件，会提示跨域错误，可以用firefox或者Safari打开
　　wty2368
　　移动端布局方案探究
　　研究了淘宝，天猫和网易彩票163的wap主页样式布局，总结移动端布局方案
　　注意：代码运行是file协议，在chrome里不支持引用本地文件，会提示跨域错误，可以用firefox或者Safari打开
　　当时做的ppt下载:2015年12月移动端布局方案探究
　　一、基本概念
　　1.物理像素(physicalpixel)
　　一个物理像素是显示器(手机屏幕)上最小的物理显示单元
　　2.设备独立像素(density-independentpixel)
　　设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如:CSS像素)
　　3.位图像素
　　一个位图像素是栅格图像(如：png,jpg,gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)
　　4.设备像素比(简称dpr)
　　设备像素比=物理像素/设备独立像素（在某一方向上，x方向或者y方向）
　　5.scale
　　缩放比：
　　scale=1/dpr
　　6.完美视口
　　
　　二、网易彩票设计方案
　　网易彩票
　　采用scale=1.0写死viewport
　　采用媒体查询来确定html根元素的font-size值，即rem值
　　rem+百分比布局
　　媒体查询的css代码如下：
　　//网易彩票的响应式布局是采用媒体查询来改变rem值实现的
　　//媒体查询css#media-query{
　　@mediascreenand(min-width:240px){
　　html,body,button,input,select,textarea{
　　font-size:9px!important;
　　}
　　}
　　@mediascreenand(min-width:320px){
　　html,body,button,input,select,textarea{
　　font-size:12px!important;
　　}
　　}
　　@mediascreenand(min-width:374px){
　　html,body,button,input,select,textarea{
　　font-size:14px!important;
　　}
　　}
　　@mediascreenand(min-width:400px){
　　html,body,button,input,select,textarea{
　　font-size:15px!important;
　　}
　　}
　　//省略
　　}
　　三、天猫设计方案
　　天猫首页
　　采用scale=1.0写死viewport
　　不采用rem，body的font-size=14px写死
　　px+flexbox布局
　　四、遇到的问题
　　1.高清屏下（dpr>1）1px线模糊问题
　　大多数情况下，设计师产出各种尺寸的稿子，都是先画出大尺寸（一般2x）的稿子，再去缩小尺寸，最后导出。这样会带来问题：如果设计师在2倍稿子里画了一条1px的线（例如border：1免费云主机域名px），这时候假如我们要在scale=1.0里呈现的话，就会变成0.5px，而很大一部分手机是无法画出0.5px的。
　　理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕（dpr=2）下就会出现位图像素点不够，从而导致图片模糊的情况。
　　2.高清屏下（dpr>1）高清图片模糊问题
　　对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。所以，对于图片高清问题，比较好的方案就是采用两倍图片。如：200300(csspixel)img标签，就需要提供400600的图片。
　　对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。所以，对于图片高清问题，比较好的方案就是采用两倍图片。如：200300(csspixel)img标签，就需要提供400600的图片。
　　五、终极解决方案–>淘宝设计方案
　　淘宝首页
　　通过js处理获取手机dpr参数，然后动态生成viewpoint
　　获取手机物理像素宽度，分成10份，每一份的宽度即是rem的尺寸。
　　根据设计稿的尺寸（px）分三种情况进行处理，采用px+rem布局
　　相关的脚本如下：
　　$(document).ready(function(){
　　vardpr,rem,scale;
　　vardocEl=document.documentElement;
　　varfontEl=document.createElement(‘style’);
　　varmetaEl=document.querySelector(‘meta[name=”viewport”]’);
　　varview1=document.querySelector(‘#view-1’);
　　if(window.screen.width

　　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-scalable=no’);
　　//设置整体div的宽高
　　view1.setAttribute(‘style’,’width:’+docEl.clientWidth+’px;height:’+docEl.clientHeight+’px’);
　　//设置data-dpr属性，留作的csshack之用
　　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);
　　returnv*rem;
　　};
　　window.px2rem=function(v){
　　v=parseFloat(v);
　　returnv/rem;
　　};
　　window.dpr=dpr;
　　window.rem=rem;})感谢各位的阅读！关于“HTML中移动端有什么布局方案”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

相关推荐: Bootstrap前端框架怎么使用

今天小编给大家分享一下Bootstrap前端框架怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。引入Boots免费云主机域名trap必要的…