手机适配和响应

手机适配屏幕尺寸是指屏幕的对角线长度。1英寸=2.54厘米屏幕分辨率是指屏幕上的像素数。设备的ppi/dpi是指像素密度。dpi=对角线分辨率/屏幕尺寸像素设备像素物理像素（devicepixel，dp），不可变。是屏幕中的发光点数。例如，分辨率为：640x1136px。横向有640个发光点，纵向有1136个发光点。网页编程中使用的是CSS像素，JS和CSS中使用的10px就是CSS像素，是可变的。CSS像素受屏幕缩放和设备像素比(dpr)的影响。例1：假设老马电脑的物理分辨率是1024768，如果我有意将操作系统的分辨率设置为512384（水平和垂直缩小1倍），那么定义的1px像素框的宽度屏幕上的css会比原来的高分辨率宽度加倍，所以CSS中的Pixels是相对的，不是绝对的。Deviceindependentpixel(dip)设备独立像素，dip，与设备无关。用于逻辑测量像素的独立于设备的单位。在移动网页开发中，指的是CSS的逻辑像素。Devicepixelratio(dpr)设备像素比，dprDPR=devicepixel/deviceindependentpixel(csspixel)在JS中，我们可以通过window.devicePixelRatio获取当前设备的dpr在CSS中，我们可以通过-webkit-device-pixel-Ratio执行媒体查询注意，当我们放大或缩小屏幕时，window.devicePixelRatio是设备独立像素和设备像素之间的变量关系：PC端100%缩放：1设备独立像素=1设备像素200%zoom:1deviceindependentpixel=2devicepixels移动端1deviceindependentpixel=1devicepixelCSS像素与设备像素的关系：当dpr为1时，1个CSS像素对应1个设备像素当dpr为2时，1个CSS一个像素对应4个设备像素。当dpr为3时，1个CSS像素对应9个设备像素。视口视口是用户网页的可见区域。PC端screen上的几个维度。width是指显示器水平方向的像素，不随浏览器窗口的变化而变化，以设备像素为单位。window.innerWidth指的是浏览器窗口的宽度（包括滚动条），可以改变，使用CSS像素说明：在100%缩放的情况下，window.innerWidth的值为1192，放大到200%,window.innerWidth在放大前变成了1/2，因为window.innerWidth是以CSS像素为单位测量的。document.documentElement.clientWidth是指视口的宽度，等于浏览器窗口的宽度（不包括滚动条）。document.documentElement.offsetWidthdocument.documentElement.offsetWidth指的是html的宽度，默认为浏览器窗口的宽度。移动端的三个视口理论布局视口（layoutviewport）通过document.documentElement.clientWidth获取布局视口的宽度。viewport是HTML页面布局的区域，可以通过viewportmeta标签进行控制。Viewviewport（视觉视口）viewviewport是手持设备物理屏幕的可见区域。表示我们浏览器可视区域的大小。通过window.innerWidth获取理想视口（idealviewport）设备是一个抽象的概念。我们在移动布局中需要的是理想的视口。它等于我们移动设备的屏幕宽度。通过这种方式，为理想视口设计的网站可以在不同分辨率的屏幕上完美呈现，而无需缩放或滚动。ormeta标签通过meta标签设置我们的viewport属性说明width设置布局视口的宽度，number或device-widthheight设置布局视口的高度，number或device-heightinitial-scalepageinitialzoomvaluemaximum-scaleusermaximumzoomvalueminimum-scaleuserminimumzoomvalueuser-scalableallows用户缩放，是或否withIE6-8throughpluginsFlex:Elasticlayout,兼容性差(IE10+)Grid:GridLayout,兼容性差Columns:gridsystem,经常需要依赖某个UI库，比如bootstrap响应式开发，最好不要混用remCSS3媒体查询比较成熟的IE兼容库。respond.js//当屏幕尺寸大于480px时应用此规则@mediascreenand(min-width:480px){}//当屏幕尺寸小于800px时应用此规则@mediascreenand(max-width:800px){}逻辑运算符andornot只有断点选择响应式图片1.css3mediaquery使用backgound-image结合mediaquery.banner{background-image:url(/static/large.jpg);}@mediascreenand(max-width:767px){background-image:url(/static/small.jpg);}2.HTML5element<图片>srcset属性是必须的，定义图片资源的media属性是可选的。您可以在媒体查询的CSS@media规则中查看详细信息。对于不支持元素的浏览器，您也可以定义一个元素来代替。3.srcset如果屏幕的ppi=1，它将加载1倍的图像，如果dpi=2，会加载2手机和mac的dpi基本达到2以上，对于普通屏幕不会浪费流量，对于retina屏幕也有高清体验。