要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] &逻辑像素[CSS像素]；
1.物理像素：
移动设备出厂时，不同设备自带的不同像素，也称硬件像素；
2.逻辑像素：
即css中记录的像素。
在开发中，为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，通常可以用 javascript 中的 window.devicePixelRatio 来获取，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取。当然，比例多少与设备相关。
在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致，iPhone的 devicePixelRatio==2，而 border-width: 1px描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。
● 用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5)可以实现两根边线的需求
● 用::after设置border：1px solid #000width:200%height:200%,然后再缩放scaleY(0.5)优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。
css30像素打法分为三步。1、相对定位是一个概念，如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
2、如果将top设置为20px，那么框将在原位置顶部下面的20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。
3、这里需要注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。相对定位会按照元素的原始位置对该元素进行移动。
移动端 pm 移动端页面布局 弹性布局(100%布局)——拉钩?、天猫首页弹性布局（100%布局）的特点： 顶部与底部的bar不管分辨率怎么变，它的?度和位置都不变； 中间每条招聘信息不管分 辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边.等比缩放布局(rem布局)—网易、淘宝首页什么是屏幕尺寸？ 移动端屏幕尺寸:屏幕对角线的长度，单位是英寸(1英寸=2.54厘米)。 常见的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0什么是屏幕分辨率？ 屏幕分辨率：指横纵方向上的像素点数，单位为px,1px=1个像素点。 一般以纵向像素*横向像素表示 一个手机的屏幕分辨率。如：1960*1080 这里的一个像素是指物理设备的一个像素点。 什么是屏幕像素密度？ 屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi(pixels per inch)缩 写。 iphone3GS和iphone4区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍数。PX:像素，将显示器分成非常细小的方格，每一个方格就是1px。 注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。 实际上像素分为两种：设备像素和逻辑像素（ CSS像素） DPR：设备像素比DPR(devicePixelRa嫧o)是默认缩放为100%的情况下，设备像素和CSS像素的 比值 在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来 越高。从iphone4开始苹果公司推出了所谓的re嫧na视网膜屏幕。之所以叫做视网膜屏幕，是 因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分 辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于 是DPR = 2 1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位。 2.为什么web app要使用rem？ 实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏 幕,根据变化html的字体大小来控制rem的大小, vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。 vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持， Android browser4.4+支持，chrome for android39支持 1.rem rem是指相对于根元素的字体大小的单位。 2.根元素 如果根元素是相对设备尺寸自动变换。 3.VW 视窗宽度，1vw等于视窗宽度的1%。 4.VW转换成PX赋值给font‐size 例：设备的分辨率为640*1136，逻辑像素为320*568 1VW=3.2px Font-size:100px转换成VW font‐size:31.25vw 1rem=31.25vw可一起结合写等比例缩放布局。 1.px px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2.em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被 人为设置，则相对于浏览器的默认字体尺寸。 3.rem rem是指相对于根元素的字体大小的单位。 4.VW 视窗宽度，1vw等于视窗宽度的1%。
