关键词：
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
1）选取一款手机的屏幕宽高作为基准(比如 iphone6的375×667)。
2）对于高清屏幕，为了达到高清效果，视觉稿的画布大小会是基准的2倍（对iphone6而言：原先的375×667，就会变成750×1334）。
问题1：对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？
首先，我们要先了解一下 dpr 是什么？
- 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
- 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
- 设备独立像素，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
总而言之，就是不同的设备（不同的系统），他们有不同的dpr，这些设备在拿到前端写好的页面（即css像素布局）之后，会根据dpr占用不同数量的物理像素。但是，它们最终显示（肉眼识别）的大小是一样的。
盗用一张图：
那这和一开始的问题：对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？ 有什么关系？ 再盗用一张图～
这样子就非常清晰了，对于dpr=2的高清（retina）屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。
因为这样，我们干脆就使用2倍大的图片，比如：200*300的图片，在高清屏上，就使用400*600的图片，但是显示的大小仍然设置为200*300，这样子的话，一个物理像素仍然是显示一个位图像素，完美。
问题2:类似于下面的布局，在使用最少标签的情况下，如何适配所有移动端屏幕？并且保存一定的宽高比，不失真。
1. 使用百分比 % 进行布局
假如你使用%对该块进行布局，很快，你就会觉得非常的‘苦逼’，由于每一块有margin值，而margin的百分比你很难去计算得到，并且，你可能需要用到各种不同的媒体查询
@media(max-width:320px){
div{margin-right: 1%;}
}
每一个屏幕你都可能需要微调，并且，当以后需要修改样式的时候，你又需要每个@media都重新走一遍，想想就后怕
2.使用 rem 布局
正所谓，原理大家都懂，rem是根据根元素html的font-size的大小，直接看例子吧～
1 html{font-size: 16px;}
2 body{
3 font-size: 0.5rem; /*16px * 0.5 = 8px;*/
4 }
基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
回到题目上，那怎么使用rem去实现该布局？并且，在设置rem的过程都非常愉快，不需要经过各种恼人的计算？
根据当前viewport的尺寸来改变html的字体大小，一般分为媒体查询和js动态计算两种。
前者必须针对市面上较为主流的分辨率作媒体查询的区间分界点，缺点是只有设置为分界点的尺寸完美缩放，分界点之间的尺寸会出现断层。
js根据屏幕尺寸去动态计算则能令所有尺寸完美缩放，缺点则是要在页面头部插入一小段js代码。
根据这2个的优缺点，在日常开发中，h5运营页面经常使用js动态计算的方法，而平常的页面（购物，网页）则使用媒体查询的方法。
一般在开发中，我们会选择一个屏幕作为基准（比如 iphone6 的 375） ，在该屏幕下，font-size基准设置为20px
先上一个非常巧妙，极大地提高了开发效率但是原理却很简单的方法。
$rem_grid: 20 !default; //使用 rem（10）即在375屏幕中代表10px
@function rem($val){
$rem : $val / $rem_grid; //由于rem是先乘以font-size得出px，所以这里先把rem（）传进来的数除以20，最后乘以html的20，其实就是参数的本来值
@if $rem == 0 {
@return #{$rem} ;
}@else{
@return $rem / ($rem * 0 + 1) * 1rem; // 带不带px单位都支持
}
}
好了，方便计算的做了，接下来是媒体查询，覆盖常见机型？
原理：根据设备的宽度（与基准设备宽度375的比值）进行缩放。废话不多说，直接上代码
@mixin query( $limit ) {
@media screen and ( min-width: $limit) { //媒体查询
& {
@content;
}
}
}
@mixin _mod_cross( $width, 375 ) {
@include query( $width * 1px ) {
font-size: $width / 375 * 20 * 1px; //这里是关键
}
}
@include _mod_cross(320, 375); //iPhone5
按照上面实现之后，当然，你要@include _mod_cross 常见的机型，这样之后，你就终于终于可以，只在iphone6下，愉快地用rem()进行布局了，无须每一个屏幕都去做适配，也无须每一次都多一步计算，大大提高开发效率。
写完媒体查询的方法，再上一份用js动态计算的代码：
原理是一样的，只是使用 document.documentElement.clientWidth 获取更加精确的设备宽度，再对html的font-size进行设置。
<script type="text/javascript">
!function(){
var maxWidth=750;
document.write('<style id="o2HtmlFontSize"></style>');
var o2_resize=function(){
var cw,ch;
if(document&&document.documentElement){
cw=document.documentElement.clientWidth,ch=document.documentElement.clientHeight;
}
if(!cw||!ch){
if(window.localStorage["o2-cw"]&&window.localStorage["o2-ch"]){
cw=parseInt(window.localStorage["o2-cw"]),ch=parseInt(window.localStorage["o2-ch"]);
}else{
chk_cw();//定时检查
return ;//出错了
}
}
var zoom=maxWidth&&maxWidth<cw?maxWidth/375:cw/375,zoomY=ch/603;//由ip6 weChat
window.localStorage["o2-cw"]=cw,window.localStorage["o2-ch"]=ch;
//zoom=Math.min(zoom,zoomY);//保证ip6 wechat的显示比率
window.zoom=window.o2Zoom=zoom;
document.getElementById("o2HtmlFontSize").innerHTML='html{font-size:'+(zoom*20)+'px;}.o2-zoom,.zoom{zoom:'+(zoom/2)+';}.o2-scale{-webkit-transform: scale('+zoom/2+'); transform: scale('+zoom/2+');} .sq_sns_pic_item,.sq_sns_picmod_erea_img{-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale('+zoom/2+');transform: scale('+zoom/2+');}';
},
siv,
chk_cw=function(){
if(siv)return ;//已经存在
siv=setInterval(function(){
//定时检查
document&&document.documentElement&&document.documentElement.clientWidth&&document.documentElement.clientHeight&&(o2_resize(),clearInterval(siv),siv=undefined);
},100);
};
o2_resize();//立即初始化
window.addEventListener("resize",o2_resize);
}();
</script>
rem的应用场景：
由于 rem 布局是相对于视口宽度，因此任何需要根据屏幕大小进行变化的元素（width、height、position 等）都可以用 rem 单位。
但 rem 也有它的缺点——不精细，其实这涉及到了浏览器渲染引擎的处理。因此，对于需要精细处理的地方（如通过 CSS 实现的 icon），可以用 px 等绝对单位，然后再通过 transform: scale() 方法等比缩放。
springboot：如何优雅地进行响应数据封装异常处理？(代码片段)
背景越来越多的项目开始基于前后端分离的模式进行开发，这对后端接口的报文格式便有了一定的要求。通常，我们会采用JSON格式作为前后端交换数据格式，从而减少沟通成本等。这篇文章，就带大家了解一下基... 查看详情
springboot：如何优雅地进行响应数据封装异常处理？(代码片段)
背景越来越多的项目开始基于前后端分离的模式进行开发，这对后端接口的报文格式便有了一定的要求。通常，我们会采用JSON格式作为前后端交换数据格式，从而减少沟通成本等。这篇文章，就带大家了解一下基... 查看详情
使用springvalidation优雅地进行参数校验
Learun软件快速开发平台是一款轻量化多语言可视化开发工具。平台目前分为Java和.net（core）版本，内置有多套UI风格模板，核心功能基本相同，包括：向导式开发组件、BI可视化、拖拽式表单、代码生成器、单据套打、通用app/小... 查看详情
使用pc端浏览器开发者工具对移动端真机环境web页面进行远程调试
...iPhone/Android页面在移动端Web开发中，有时候只通过模拟器进行调试是不够的，需要在真机环境下进行调试才能发现并解决一些问题。而移动端真机环境浏览器没有开发者工具，在这种情况下，使用PC端浏览器开发者工具对移动端... 查看详情
移动端web怎么循序渐进地开发一个移动端页面
1.移动页面开发基础1.1像素——什么是像素像素是Web页面布局的基础，那么到底什么才是一个像素呢？像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念，实际上，Web前端开发领域，像素... 查看详情
前端如何优雅的实现跨终端开发（pc端+移动端）(代码片段)
文章目录解决方案一：使用CSS媒体查询。解决方案二：写两套代码，分别应用于PC端和移动端。推荐方案：使用CabloyJS相关链接解决方案一：使用CSS媒体查询。这是传统的解决方案。使用一套代码，先做PC端... 查看详情
移动端开发页面覆盖iphone顶部信息栏，啥原因
...端设置、开通VoLTE、网络覆盖等原因），会回落到2/3G网络进行通话，按照原资费标准收费。2、iPhone的VoLTE的开关在哪里看iOS9.2.1的路径为：设置-蜂窝移动网络-启用4G，可以看到逗关闭地、逗语音与数据地和逗仅数据地三个选项。... 查看详情
移动端学习目录
...端开发工程师的标配技能 小火柴将移动端的知识体系进行了梳理和归纳，总结成以下目录 基础 像素和DPR 查看详情
优雅地将 UIView 移动到键盘的 inputAccessoryView
】优雅地将UIView移动到键盘的inputAccessoryView【英文标题】：ElegantlymoveaUIViewtoakeyboard\'sinputAccessoryView【发布时间】：2015-11-1219:07:32【问题描述】：是否有一种优雅的方式可以将位于其父视图底部的UIView（即UIButton）无缝移动到键盘... 查看详情
unity如何优雅地移动物体-8个方法(代码片段)
...下移动物体的一些方法和优缺点。项目地址仓库地址如何优雅地移动物体？8个方法向某个方向移动Transform.Position众所周知，我们可以给对象的Transform组件赋予一个坐标来决定其位置。transform.position=newVector3(2,1,0);当我... 查看详情
新人必看|移动端“动态化”是什么意思？
...用所占据，而这些应用更近似于Software，依托于应用市场进行更新，只有其中的数据是实时的。这样，每次产品的更新，必须依赖用户的主动更新，从而造成了一定的用户成本，不利于产品的快速迭代，降低应用的试错能力。因... 查看详情
如何用java进行移动端后台开发
java进行移动后台开发与java进行web后台开发完全一样。java原生的后台框架servlet,如果使用java后台开源框架可以选用spring+springmvc+mybatis，或者使用ssh框架。一 其实前台与后台交互常用两种协议方式： 1http协议。HTTP是一个属... 查看详情
探究移动端开发
...机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。 第一部分：基本概念 物理像素：这个就是在屏幕上可以控制的最小显示单位，比如显... 查看详情
认识移动端开发
...机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。第一部分：基本概念 物理像素：这个就是在屏幕上可以控制的最小显示单位，比如显示颜... 查看详情
vue开发实战基础篇#13：如何优雅地获取跨层级组件实例（拒绝递归）(代码片段)
说明【Vue开发实战】学习笔记。ref引用信息递归查找代码繁琐.性能低效callbackref主动通知(setXxxRef)主动获取(getXxxRef)比如E节点更新就通知A组件，A组件进行ref的缓存即可组件A<template><divclass="border"><h1>A结... 查看详情
移动端兼容
移动端前端开发注意点第一次接触移动端开发，发现web端和移动端的差别还是很大的，我主要记录移动端的一些内容：移动端与web端在网页设计与交互方面的差别移动端注意点一些小技巧移动端的一些问题及解决方法移动端与web... 查看详情
黑马项目公开：传智健康移动端开发-体健预约(代码片段)
...实现，而且更加方便，而这些都需要移动端开发进行支持，那如何进行移动端开发呢？移动端开发主要有三种方式：1、基于手机API开发（原生APP）2、基于手机浏览器开发（移动web）3、混合开发... 查看详情
探究移动端开发
...布局则是native，否则是h5页面。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。 推荐文章：官方文档 用于生产的flexible.js 查看详情