H5移动端高清多屏适配方案共9页文档
HTML5移动页面自适应手机屏幕四类方法
HTML5移动页⾯⾃适应⼿机屏幕四类⽅法1、使⽤meta标签：viewportH5移动端页⾯⾃适应普遍使⽤的⽅法，理论上讲使⽤这个标签是可以适应所有尺⼨的屏幕的，但是各设备对该标签的解释⽅式及⽀持程度不同造成了不能兼容所有浏览器或系统。
viewport 是⽤户⽹页的可视区域。
翻译为中⽂可以叫做"视区"。
⼿机浏览器是把页⾯放在⼀个虚拟的"窗⼝"（viewport）中，通常这个虚拟的"窗⼝"（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中（这样会破坏没有针对⼿机浏览器优化的⽹页的布局），⽤户可以通过平移和缩放来看⽹页的不同部分。
viewport标签极其属性：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>每个属性的详细介绍：属性名取值描述width正整数或 device-width定义视⼝的宽度，单位为像素height正整数或 device-height定义视⼝的⾼度，单位为像素，⼀般不⽤initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义缩⼩最⼩⽐例，它必须⼩于或等于maximum-scale设置maximum-scale[0.0-10.0]定义放⼤最⼤⽐例，它必须⼤于或等于minimum-scale设置user-scalable yes/no定义是否允许⽤户⼿动缩放页⾯，默认值yes2、使⽤css3单位remrem是CSS3新增的⼀个相对单位（root em，根em）,使⽤rem为元素设定字体⼤⼩时，是相对⼤⼩，但相对的只是HTML根元素。
vue@cli3.0移动端H5适配方案
vue@cli3.0移动端 H5适配方案
vue@cli3移动端 H5 页面适配
一 、 lib-flexible (淘 宝 弹 性 布 局 方 案 )
lib-flexible会自动在index.html里添加带有的标签，需要删除之前原来带有name=“viewport” 的标签，同时会自动设置html的font-size为屏幕 宽度除以10，也就是1rem等于html根节点的font-size。
2. 在项目入口文件导入 lib-flexible
iostcss-px2rem
修改vue.config.js的配置,设置1rem转换为多少px
module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 37.5 }) ] } } }
}
假如设计稿的宽度是375px，此时的1rem应该等于37.5px
假如设计稿的宽度是750px，此时的1rem应该等于75px
二 、 postcss-px2rem
postcss-px2rem会将代码中的px转化为rem
三、使用方法
1. 安装 flexible 和 postcss-px2rem
npm install lib-flexible --save npm install postcss-px2rem --save 或 yarn add lib-flexible --save yanr add postcss-px2rem --save
制作好的H5如何解决适配问题
此时，不同的手机会看到不同的小山。 但展示的主题太阳和遮盖的云朵在任何手机上都会完全呈现。如下：
谢 谢
中间深灰色区域为 兔展 提供的实际编辑区域： 用户编辑所见即所得的区域。在本区域内的所有文字 图片等组件不会被拉伸，截取。 浅灰色边框区域为不同屏幕所见区域： 绿色虚线边框区域内为iPhone 4s等3：2的屏幕手机 的可见区域；
Hale Waihona Puke 红色虚线边框区域为iPhone 6 plus 大屏手机可见区 域。
制作好的H5 如何解决适配问题
业务概念
在制作好H5之后，由于手机尺寸分辨率的碎片化，同一个H5会有不同的显 示效果，给宣传和分享带来一定不好的影响，因此兔展针对不同机型的适配 提供了不同的解决方案
以iPhone 4s（3：2） iPhone 6 plus（16：9）
两种极端模式作为适配参考。
不在兔展标准参考范围内的组件在不同比例和分辨率大 小的手机上有不同的显示结果，兔展会激活不同的适配 方案，建议适配解决方案：1、蓝色底图尺寸建议为： 680x1080。 1、修饰性组件都以外侧虚线为准； 2、必须出现的组件都以最内测的虚线为准； 以左图为例： 太阳和云朵是必须出现的组件，规范以内侧虚线为准； 绿色小山的右边应该以右侧虚线为准； 黄色小山的底部应该以外框虚线为准；
移动应用开发中的多屏适配与分辨率适配方法
移动应用开发中的多屏适配与分辨率适配方法随着移动互联网的快速发展，人们对移动设备的依赖度越来越高，越来越多的应用程序涌现出来。
然而，市场上存在着众多品牌、型号和尺寸各异的移动设备，这给应用开发带来了巨大的挑战。
在开发移动应用时，要保证应用在不同的屏幕上显示效果良好，就需要进行多屏适配和分辨率适配。
多屏适配是指根据不同的屏幕尺寸和显示比例，调整应用的布局和显示效果，以保证在不同设备上都能正常展示。
一种常见的多屏适配方法是使用百分比布局或者使用可伸缩的布局容器，这样可以根据屏幕尺寸动态调整界面元素的大小和位置。
另外，可以使用媒体查询技术来针对不同的屏幕大小加载不同的样式文件，以适应不同的屏幕尺寸。
而分辨率适配则是指根据设备的分辨率来调整应用的显示效果，使其在高分辨率和低分辨率设备上都能正常展示。
在移动应用开发中，一般使用像素密度（dpi）来进行分辨率适配。
根据设备的dpi，可以为不同密度的屏幕提供不同的资源文件和布局文件。
例如，可以为低密度屏幕提供较小的图标和字体，并为高密度屏幕提供较大的图标和字体。
除了多屏适配和分辨率适配外，还有一些其他的适配方法可以帮助开发人员更好地适应不同的屏幕。
一种常见的方法是使用弹性布局，即使用百分比或者弹性单位代替固定的像素单位，以便应对不同尺寸的屏幕。
这样可以让界面元素在不同大小的屏幕上自动调整大小和位置。
此外，还可以使用多列布局来适应不同的屏幕宽度。
在移动应用中，经常会遇到需要在一个界面中同时显示多个模块或者功能的情况，对于较窄的屏幕，可以采用垂直排列的方式；而对于较宽的屏幕，则可以采用水平排列的方式。
这样可以更好地利用屏幕空间，提升用户体验。
总的来说，在移动应用开发中，多屏适配和分辨率适配是至关重要的。
只有通过合适的适配方法，才能保证应用在各种设备上都能正常显示，并且提供良好的用户体验。
为了实现这一点，开发人员需要充分了解不同屏幕的特点和要求，灵活运用适配方法，不断优化和改进。
详解移动端h5页面根据屏幕适配的四种方案
详解移动端h5页⾯根据屏幕适配的四种⽅案⽅法⼀：引⼊淘宝开源的可伸缩布局⽅案淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素⽐设置scale的值，保持视⼝device-width始终等于设备物理像素，屏幕⼤⼩动态计算根字体⼤⼩，具体是将屏幕划分为10等分。
这块也可以直接⽤js实现，后⾯会提到具体引⼊和使⽤⽅法，移步github查看，⾮常详细。
⽅法⼆：viewport 的使⽤github⾥边，有提到 viewport 的使⽤。
我感觉这篇⽂章关于viewport 的介绍特别详细，包括⽐例、是否缩放等的属性介绍特别的详细，虽然⽂章的内容⼀⼤⽚的字看起来很多，但是请耐⼼看完，都是⼲货能很好的让你认识viewport。
如果⽐较着急，请继续往下看总结图吧关于 viewport 的，这块直接引⽤上⾯⽂章的内容，我感觉也是最⼲脆最直接的总结了吧⽅法三：使⽤js+viewport动态设置⼿动适配rem我的编辑器是vscode,添加了插件cssrem⾃动转换index.html<!DOCTYPE html><html><head><meta charset="utf-8"><!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><!-- 启⽤360浏览器的极速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使⽤兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对⼿持设备优化，主要是针对⼀些⽼的不识别viewport的浏览器，⽐如⿊莓 --><meta name="HandheldFriendly" content="true"><!-- 微软的⽼式浏览器 --><meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC强制全屏 --><meta name="full-screen" content="yes"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC应⽤模式 --><meta name="browsermode" content="application"><!-- QQ应⽤模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 点击⽆⾼光 --><meta name="msapplication-tap-highlight" content="no"><meta content="telephone=no" name="format-detection" /><meta name="huaban" content="nopin" /><link rel="icon" type="image/x-icon" href="/favicon.ico"><title>新茶饮</title><script src="/config.js"></script><script src="/open/js/jweixin-1.0.0.js"></script></head><body><div id="app"></div><!--在iphone 5 中1rem=16px;html font-size =16px=1rem;--><script>//得到⼿机屏幕的宽度let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;console.log('htmlWidth',htmlWidth)//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];// if(htmlWidth>640){//超过640⼤⼩的，字体根部都是16px// htmlWidth=640;// console.log('htmlWidth-true',htmlWidth)// }//设置根元素字体⼤⼩htmlDom.style.fontSize = htmlWidth / 40 + 'px';</script></body></html>⽅法四：根据css的媒体查询动态设置根部html字体⼤⼩html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {html { font-size: 703%; }}@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {html { font-size: 732.4%; }}@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {html { font-size: 750%; }}@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {html { font-size: 781.25%; }}@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){html { font-size: 808.6%; }}@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){html { font-size: 843.75%; }}到此这篇关于详解移动端h5页⾯根据屏幕适配的四种⽅案的⽂章就介绍到这了,更多相关h5移动端根据屏幕适配内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。
移动端APP的多屏适配与设计优化
移动端APP的多屏适配与设计优化随着移动互联网的普及，移动端APP的重要性也越来越凸显。
如今，人们越来越依赖于手机APP，而且手机的尺寸和分辨率也越来越多样化。
因此，移动端APP的多屏适配和设计优化，成为了非常重要的问题。
在这篇文章中，我们将探讨移动端APP的多屏适配和设计优化，为App的开发和设计提供一些有用的参考。
一、多屏适配的必要性移动设备的屏幕尺寸和分辨率多种多样，这也增加了开发者在开发时的难度。
不同的手机屏幕尺寸和分辨率，会影响App的外观和功能。
如果我们只开发一个版本，那么在不同的设备上，用户可能无法获得最佳的使用体验。
因此，多屏适配就变得至关重要。
多屏适配有两种类型，一种是响应式设计，另一种是自适应设计。
对于响应式设计来说，它会根据屏幕尺寸和分辨率的变化，重新调整页面的布局。
而自适应设计会根据不同设备的屏幕尺寸和分辨率，为每一种设备创建不同的布局和设计方案。
不管哪种设计方案，在实际使用中都需要考虑以下几点：1. 确定基准设计尺寸：在开始设计时，首先需要确定一个基准设计尺寸。
这会帮助你在不同的设备上创建一致的设计方案。
针对iOS系统，通常采用375px的宽度作为基准。
而对于安卓系统来说，通常采用360dp的宽度作为基准。
在这个基础上，你可以根据具体情况进行适当的调整。
2. 细节调整：对于不同尺寸和分辨率的设备，在移动端也需要考虑细节调整。
比如，按钮尺寸、字体大小、图标大小等，都需要在不同设备上进行调整，以确保用户界面在各种设备上都可以正常运行。
3. 多屏幕测试：在开发完成后，需要将移动端APP放入不同的设备中进行测试，确保其在各种屏幕尺寸和设备上都可以正常运行。
在测试时，需要注意各种情况，如设备旋转、分割屏幕等问题。
二、设计优化的重要性移动端App是用户与产品之间的桥梁，随着行业的竞争加剧，行业竞争的焦点从功能走向了用户体验。
因此，设计优化也变得尤为重要。
1. 简单直观的设计：在移动端设计中，简单直观是非常重要的。
移动端页面适配多方案解析
固定布局视口宽度，使用viewport进行缩放
如： 、
荔枝的代码：
if(/Android (\d+\.\d+)/.test(erAgent)){ var version = parseFloat(RegExp.$1); if(version>2.3){ var phoneScale = parseInt(window.screen.width)/640; if(/MZ-M571C/.test(erAgent)){ document.write('<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-sc }else if(/M571C/.test(erAgent)&&/LizhiFM/.test(erAgent)){ document.write('<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-sc }else{ document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale + } }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); }
屏幕适配方案
屏幕适配方案在现代移动设备逐渐普及的今天，不同尺寸、不同分辨率的屏幕成为了常态。
为了能够让应用在各种屏幕上都能够呈现出良好的效果，开发者需要采用适配方案来解决屏幕适配的问题。
本文将介绍一些常用的屏幕适配方案，帮助开发者快速选择合适的方案。
常见屏幕适配问题在进行屏幕适配之前，我们需要了解一些常见的屏幕适配问题。
1.屏幕尺寸差异：不同设备的屏幕尺寸不同，如果不进行适配，可能会导致界面显示不全或者出现布局错乱的情况。
2.屏幕分辨率差异：不同设备的屏幕分辨率也不同，如果不进行适配，可能会导致界面元素模糊或者显示过小的问题。
3.屏幕比例差异：不同设备的屏幕比例（宽高比）也不同，如果不进行适配，可能会导致界面拉伸变形的情况。
响应式布局响应式布局是一种常用的屏幕适配方案，它通过使用相对单位（如百分比、em、rem等）来定义界面元素的尺寸和位置，使得页面能够根据屏幕的大小自动调整布局，以适应不同的屏幕。
在实际开发中，可以通过以下方式实现响应式布局：1.使用CSS3的@media查询：通过查询不同的屏幕宽度范围，设置不同的样式，以达到适应不同屏幕的效果。
2.使用弹性盒子布局：弹性盒子布局可以自动调整子元素的尺寸和位置，适应不同的屏幕大小。
3.使用栅格系统：栅格系统可以将页面分割成若干列，根据屏幕的大小调整列的宽度，以实现自适应布局。
响应式布局的优点是简单灵活，可以适应各种屏幕尺寸和比例，但也存在一些缺点。
由于采用了相对单位，可能会导致界面元素在不同屏幕上显示的大小有差异，而且对于较大的屏幕，布局可能会显得过于宽松。
百分比布局百分比布局是一种简单有效的屏幕适配方案，通过使用百分比来定义界面元素的尺寸和位置，使其能够根据屏幕的大小自动调整。
在使用百分比布局时，需要注意以下几点：1.父元素的尺寸需要固定，这样才能让子元素按照百分比计算。
2.父元素和子元素都需要采用百分比单位来设置尺寸和位置。
3.使用百分比布局时需要考虑元素的最小宽度和最大宽度，以避免出现过小或者过大的情况。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
背景1.开发移动端H5页面2.面对不同分辨率的手机3.面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1.首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。
2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
问题：1.对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？2.对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)?带着问题，往下看...一些概念在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。
物理像素(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的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
综合上面几个概念，一起举例说明下：以iphone6为例：1.设备宽高为375×667，可以理解为设备独立像素(或css像素)。
2.dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。
用一张图来表现，就是这样(原谅我的盗图)：上图中可以看出，对于这样的css样式：width: 2px;height: 2px;在不同的屏幕上(普通屏幕vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素对应1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应4个物理像素(1:4)。
位图像素一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。
每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。
谈到这里，就得说一下，retina下图片的展示情况？理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。
在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。
用一张图来表示：如上图：对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。
所以，对于图片高清问题，比较好的方案就是两倍图片(2x)。
如：200×300(css pixel)img标签，就需要提供400×600的图片。
如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成1 : 1的比例，图片自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2？)。
这里就还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢？很明显，在普通屏幕下，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。
用一张图片来表示：针对上面的两个问题，我做了一个demo(内网访问)狂戳这里。
demo中，100×100的图片，分别放在100×100，50×50，25×25的img容器中，在retina屏幕下的显示效果。
条形图，通过放大镜其实可以看出边界像素点取值的不同：•图1，就近取色，色值介于红白之间，偏淡，图片看上去会模糊(可以理解为图片拉伸)。
•图2，没有就近取色，色值要么是红，要么是白，图片看上去很清晰。
•图3，就近取色，色值介于红白之间，偏重，图片看上去有色差，缺少锐利度(可以理解为图片挤压)。
爱字图，可以通过看文字"爱"来区分图片模糊还是清晰。
(ps：如果看上去不明显，可以用手机扫码网页(内网地址)或者点击原图看会更直观点。
几个问题这里说一下，移动端H5开发，在不同分辨率，不同屏幕手机下会遇到的几个经典问题。
retina下，图片高清问题这个问题上面已经介绍过解决方案了：两倍图片(2x)，然后图片容器缩小50%。
如：图片大小，400×600;1.img标签width: 200px;height: 300px;2.背景图片width: 200px;height: 300px;background-image: url(image@2x.jpg);background-siz e: 200px 300px; // 或者: background-size: contain;这样的缺点，很明显，普通屏幕下：1.同样下载了2x的图片，造成资源浪费。
2.图片由于downsampling，会失去了一些锐利度(或是色差)。
所以最好的解决办法是：不同的dpr下，加载不同的尺寸的图片。
不管是通过css媒体查询，还是通过javascript条件判断都是可以的。
那么问题来了，这样的话，不就是要准备两套图片了嘛？(1x 和2x)我想，做的好的公司，都会有这么一个图片服务器，通过url获取参数，然后可以控制图片质量，也可以将图片裁剪成不同的尺寸。
所以我们只需上传大图(2x)，其余小图都交给图片服务器处理，我们只要负责拼接url即可。
如，这样一张原图：https://img.alicdn/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原图可以类似这样，进行图片裁剪：// 200×200https://img.alicdn/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg // 100×100https://img.alicdn/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg (ps: 当然裁剪只是对原图的等比裁剪，得保证图片的清晰嘛~)retina下，border: 1px问题这大概是设计师最敏感，最关心的问题了。
首先得说一下，为什么存在retina下，border: 1px这一说？我们正常的写css，像这样border: 1px;，在retina屏幕下，会有什么问题吗？先来，来看看下面的图：上面两张图分别是在iphone3gs(dpr=1)和iphone5(dpr=2)下面的测试效果，对比来看，对于1px的border的展示，它们是一致的，并无区别。
那么retina显示屏的优势在哪里，设计师为何觉得高清屏下(右图)这个线条粗呢？明明和左右一样的~还是通过一张图来解释(原谅我再次盗图)：上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。
所以，设计师想要的retina下border: 1px;，其实就是1物理像素宽，对于css而言，可以认为是border: 0.5px;，这是retina下(dpr=2)下能显示的最小单位。
然而，无奈并不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理，那么如何实现这0.5px呢？最简单的一个做法就是这样(元素scale)：.scale{position: relative;}.scale:after{content:"";position: absolute;bottom:0px;left:0px;right:0px;border-bottom:1px solid #ddd;-webkit-transform:scaleY(.5);-webkit-transform-origin:0 0;}我们照常写border-bottom: 1px solid #ddd;，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，但是这样hack实在是不够通用(如：圆角等)，写起来也麻烦。
当然还有其他好多hack方法，网上都可以搜索到，但是各有利弊，这里比较推荐的还是页面scale的方案，是比较通用的，几乎满足所有场景。
对于iphone5(dpr=2)，添加如下的meta标签，设置viewport(scale 0.5)：<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">这样，页面中的所有的border: 1px都将缩小0.5，从而达到border: 0.5px;的效果。