初级前端的我，面对很多问题，都不知道怎么解决，百度，问别人，然后自己去理解。
发现，太多的事情无法想象，无法预料，现在，还可以好好的活着就该感恩的活着！
我的大学同学，我的主内家人，竟那么突然离开了，没有留下一丝的只言片语，能怎么办呢？只能感恩的活着，活出感恩的生活，写这个文章，想好好的提醒自己，今天，此时此刻，还能坐着敲代码是种幸福，因为我知道我不是自己活着，我是为荣耀上帝而活，有目标有使命，希望，我身边的人可以因为我而得益处！
感慨下人生，立足现在，好好生活。珍惜眼前的一切，因为不知道明天和意外哪个会先来。。。
进入正题，之前不太会写移动端，就会用框架，然而框架还用的不太熟，所以，一顿百度，记录下。
首先要清楚一些概念：
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
设备像素比(device pixel ratio)
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配。
移动端页面的head里要写上
<meta name="viewport" content="width=device-width,inital-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
解析：
width=device-width：让宽度=设备缩放之后的宽度，比如320、360、375、414这些屏幕。
initial-scale=1：初始化的缩放比例1，这个属性和css中transform: scale(1);有异曲同工之妙。
minimum-scale=1：最小缩放比例，相当于你给div设置mix-height一样，有限制。maximum-scale=1：最大缩放比例。
user-scalable=no：是否允许用户使用双指进行缩放，默认不允许。
我们需要写border:1px的时候，实际上是物理相似2px，这种情况平时做直线的时候勉强可以应付，transform: scaleY(0.5);这样看起来就洗了很多，但是做圆角的按钮的时候就力不从心了，而且大量使用transform 的代码也不是很优雅，这个时候我们可以在头部引入这么一行代码：
<meta name="viewport" content="width=640,user-scalable=no">
就是640，和设计图的尺寸一模一样。还是灰常管用的，可以用下
然后，你需要引入js，之前我写的媒体查询，但是效果不是特别好，很多屏幕还有距离什么的与设计出入太大，所以还是动态获取当前屏幕大小，然后让电脑自己生成相应的样式渲染还是很棒哒！来段js代码
(function () {
var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object')
var init = function () {
var htmlNode = document.body.parentNode, orientation
var updateOrientation = function () {
if (supportOrientation) {
orientation = window.orientation
switch (orientation) {
case 90:
case -90:
orientation = 'landscape'
break;
default:
orientation = 'portrait'
break;
}
} else {
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'
}
htmlNode.setAttribute('class', orientation)
}
var recalc = function () {
var docEl = document.documentElement
var clientWidth = docEl.clientWidth
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px'
}
var x=function(){
recalc()
updateOrientation()
}
if (supportOrientation) {
window.addEventListener('orientationchange', x, false)
} else {
//监听resize事件
window.addEventListener('resize', x, false)
}
x()
}
window.addEventListener('DOMContentLoaded', init, false)
})()
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px'.这个50是根font-size的大小，可以自己改动,我的设计稿是苹果6的375*667,所以我用的50，这个根据实际情况和个人偏好而定，怎么好算怎么来。
然后就可以进行你的布局和渲染了。。。。里面用到的属性，不管是height,width,margin,padding,都统一用的rem，相对的单位，字体的话就是设计给的大小，用px和rem进行换算，话说有点费脑筋，所以如果可以，可以选择用Sass语言，便利开发，这也是我要学习的。
慢慢学习，每天进步一点点，希望可以帮到你！
每天都是新的，每天都是与众不同的，世界有你会更美好！加油！！！
网友评论