移动端布局方案探究

研究了淘宝,天猫和网易彩票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 name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />

二、网易彩票设计方案

网易彩票

  • 采用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
  • 不采用rem,body的font-size=14px写死
  • px flexbox布局

四、遇到的问题

1. 高清屏下( dpr>1 )1px线模糊问题

大多数情况下,设计师产出各种尺寸的稿子,都是先画出大尺寸(一般2x)的稿子,再去缩小尺寸,最后导出。 这样会带来问题:如果设计师在2倍稿子里画了一条1px的线(例如border:1px),这时候假如我们要在scale=1.0里呈现的话,就会变成0.5px,而很大一部分手机是无法画出0.5px的。
理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。在普通屏幕下是没有问题的,但是在retina屏幕(dpr=2)下就会出现位图像素点不够,从而导致图片模糊的情况。


2. 高清屏下( dpr>1 )高清图片模糊问题

对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。所以,对于图片高清问题,比较好的方案就是采用两倍图片。如:200×300(css pixel)img标签,就需要提供400×600的图片。
对于dpr=2的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[name="viewport"]');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-scalable=no');// 设置整体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地址 | 我的博客

参考文献

  1. 移动前端开发之viewport的深入理解
  2. 【原创】移动端高清、多屏适配方案
  3. wap手机端页面根据dpr和宽度计算出font-size对应数值
  4. less语法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搭建springboot环境

1.前戏准备: SpringBoot核心jar包:这里直接从Spring官网下载了1.5.9版本. jdk:jdk1.8.0_45. maven项目管理工具:3.5版本. tomcat:8.5版本. 本地仓库:注意settings.xml里面的设置"<localRepository>E:/SpringBoot/repository</localRepository>"红色部分代…

.Net Core 2.0 生态(1).NET Standard 2.0 特性介绍和使用指南

.NET Standard 2.0 发布日期&#xff1a;2017年8月14日公告原文地址 前言 早上起来.NET社区沸腾了&#xff0c;期待已久的.NET Core 2.0终于发布&#xff01;根据个人经验&#xff0c;微软的产品一般在2.0时会趋于成熟&#xff0c;所以一个新的.Net开发时代已经来临&#xff01…

jquery中的创建节点和添加节点的方法

今天来说一下针对jquary关于创建节点和添加节点的方法&#xff0c;先来看看创建节点&#xff1a; 1、直接添加节点内容即可 $("div").append(<a href"http://www.baidu.com">百度一下</a>); 2、可以创建jquary对象添加进去 var $li$(<a hre…

移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~

在移动端 H5 页面开发中&#xff0c;我使用了 fixed 固定某个元素在屏幕的最下方&#xff0c; 这时点击输入框&#xff0c;接着非常非常自然地出现了元素被系统键盘顶起来的情况&#xff0c;如下图。 解决方案: 首先&#xff0c;给页面最外层包裹一层 div(相对定位) &#xf…

momentum公式

momentum对于w的更新公式&#xff1a; http://caffe.berkeleyvision.org/tutorial/solver.html转载于:https://www.cnblogs.com/ymjyqsx/p/7364743.html

带弹簧的Hazelcast分布式执行

ExecutorService功能是Java 5附带的&#xff0c;位于java.util.concurrent包中。 它扩展了Executor接口&#xff0c;并提供了线程池功能来执行异步简短任务。 建议使用Java Executor服务类型来查看基本的ExecutorService实现。 此外&#xff0c;ThreadPoolExecutor是ExecutorS…

Manacher's Algorithm 马拉车算法(最长回文串)

这个马拉车算法Manacher‘s Algorithm是用来查找一个字符串的最长回文子串的线性方法&#xff0c;由一个叫Manacher的人在1975年发明的&#xff0c;这个方法的最大贡献是在于将时间复杂度提升到了线性&#xff0c;这是非常了不起的。对于回文串想必大家都不陌生&#xff0c;就是…

java咖啡机故障5_【咖啡小常识】咖啡机不得不知道的常见故障及解决方法

原标题&#xff1a;【咖啡小常识】咖啡机不得不知道的常见故障及解决方法咖啡行业交流请加私人微信精品咖啡香&#xff0c;微信号&#xff1a;(长按复制)thinkingcapacity一&#xff0e;没有蒸汽或做出的咖啡不热可能原因1、在一个时间段放出了大量的热水(不建议使用咖啡机自带…

idiom的学习笔记(一)、三栏布局

三栏布局左右固定&#xff0c;中间自适应是网页中常用到的&#xff0c;实现这种布局的方式有很多种&#xff0c;这里我主要写五种。他们分别是浮动、定位、表格、flexBox、网格。 在这里也感谢一些老师在网上发的免费教程&#xff0c;使我们学习起来更方便&#xff01;&#x…

USB之HID类Set_Report Request[调试手记1]

请翻开《Device Class Definition for Human Interface Devices (HID) Version 1.11 》7.2.2 Set_Report Request 现在我们先那键盘来做实验来观察。[备注:测试当时NUM指示灯亮] 通过笔记本上按“capslock”按键来观察外置键盘上大小写的指示灯。 通过USBlyzer观察到 发送03的…

Devoxx 2012:Java 8 Lambda和并行性,第1部分

总览 Devoxx是世界上最大的独立于供应商的Java会议&#xff0c;于11月12日至16日在比利时的Atwerp举行。 今年规模更大了&#xff0c;来自40个不同国家的3400名与会者。 和去年一样 &#xff0c;我和来自SAP的一小群同事都来了&#xff0c;并享受了很多。 在Nao机器人令人印象…

前端常见的十七个框架

本文作者祈澈姑娘&#xff0c;转载请声明 前端的技术日渐更新&#xff0c;最近得空&#xff0c;花了一上午的时间&#xff0c;将前端常见的框架总结了一下&#xff0c;在开发的过程之中&#xff0c;有了这些&#xff0c;不断能够提高自己的工作效率&#xff0c;还可以在工作之余…

Cesium调用Geoserver发布的 WMS、WFS服务

1 GeoServer服务发布 1.1 WMS服务 下载GeoServer安装版安装&#xff0c;同时安装geopackage扩展&#xff0c;以备使用。使用XX地图下载器下载地图&#xff0c;导出成GeoPackage地图文件。 &#xff08;1&#xff09;下载 GeoPackage DEM数据 &#xff08;2&#xff09;打开GeoS…

如何用ThreadLocals射击自己

它将很好地启动。 像大多数故事一样。 您会发现一个新概念&#xff0c;并对其功能感到惊讶。 然后突然装备了这把新锤子&#xff0c;一切开始看起来像钉子。 根据我们过去几个月的经验&#xff0c; java.lang.ThreadLocal真是一锤定音。 我想这全都归结为ThreadLocal的工作原理…

确保任务的执行顺序

有时有必要对线程池中的任务施加一定的顺序。 JavaSpecialists通讯的第206期提出了一种这样的情况&#xff1a;我们有多个连接&#xff0c;使用NIO可以从中读取。 我们需要确保给定连接中的事件按顺序执行&#xff0c;但是不同连接之间的事件可以自由混合。 我想提出一个类似但…

transition

一、语法 transition: property duration timing-function delay transition属性是个复合属性&#xff0c;她包括以下几个子属性&#xff1a; transition-property &#xff1a;规定设置过渡效果的css属性名称transition-duration &#xff1a;规定完成过渡效果需要多少秒或…

图解在VC里使用graphics.h画图(相似TC)

1 www.easyx.cn 下载 EasyX 库 我下的2014;解压后例如以下图&#xff1b; 2 依据自己的VC 版本号进行安装 3 在控制台画一个圆 #include <graphics.h> // 引用图形库 #include <conio.h> void main() {initgraph(640, 480); // 初始化画图窗体circle(200, 200, 100…

使用SwingWorker的Java Swing中的多线程

如果要使用Swing用J​​ava编写桌面或Java Web Start程序&#xff0c;您可能会觉得需要通过创建自己的线程在后台运行某些东西。 没有什么可以阻止您在Swing中使用标准的多线程技术&#xff0c;并且需要遵循通常的注意事项。 如果您有多个线程访问相同的变量&#xff0c;则需要…

MySql Jar 包下载

MySql JAR 包下载 我们要使用Spring 链接MySql 需要两个Jar 包 一个是C3p0 一个是MySql 的Connection Jar 包 C3p0&#xff1a; 进入下面的网址 http://www.mchange.com/projects/c3p0/ 按照黄色的指示 下载 2. MySql Jar 包 进入MySql 官网 https://dev.mysql.com/down…

c语言以空格分割字符串_c语言中,输入任意字符串,任意空格隔开

c语言中,输入任意字符串,任意空格隔开关注:132 答案:3 mip版解决时间 2021-01-27 16:01提问者更无风月2021-01-27 01:51如题,希望大神代码最佳答案二级知识专家闪光的男人2021-01-27 02:50用scanf以%s读入字符串&#xff0c;即可实现输入以空格分隔的字符串。以下代码功能为&…