1．思考在移动端越来越重要的背景下，对于移动适配，每个Web开发者都有自己的想法。移动优先，PC优先，还是两者兼而有之？在实际开发中，这个问题与项目的产品定位有关，也涉及到UI的设计，不是开发者能决定的。但无论产品如何定位，作为开发者，总是要提供最好的解决方案。您应该使用一组样式还是多组样式？网上一搜，有静态布局、流体布局、响应式布局、自适应布局、灵活布局等等，怎么选？看完这篇文章，相信你就知道了。二、viewport的使用1、最常见的设置，大部分框架（如bootstrap）和知??名站点基本都是这个配置2.这个配置的重点是width=device-width，就是让viewwindow等于devicewidth，也就是我们开发中可以使用的文件宽度，其他几个“初始缩放尺寸”，“最大缩放尺寸””、“最小缩放尺寸”和“是否允许用户缩放”可以理解为是用来“修复”这个设置不被破坏的。3.这个设置很简单，但是也带来了一些需要解决的问题。A。现在的手机都是双屏或者三屏的Retina高清屏。1px的实际效果是多了一个像素。针对不同的设备设置不同的initial-scales可以有更好的效果，比如2倍Retina(6s,7,8)的iPhone6设置为0.5。一旦动态设置了这个，就意味着窗口不同了，需要适配不同的风格。这也是一组分配样式的基准。稍后将更详细地解释如何分配样式。b.如果PC端有最小宽度限制，也需要配置不同的宽度值。三、单位的使用1、css中有很多单位。这里只介绍最常用的：(1)px：这个可以理解为“基线”单位，意思是无论在什么设备上，它的值都不会改变。如cm、kg等。(2)em：这是相对于父容器的单位，一般用在font-size中比较好。如果父容器的font-size为16px，则1em=16px(3)rem：相对于根元素html的单位，如果html的font-size为16px，则1rem=16px(4)vw/vh:viewportwidthandheight是100vw/100vh，和百分比类似，只不过百分比是相对于父容器的，也就是相对于viewport2.移动适配最常用的应该是rem。很多框架和淘宝的灵活适配都是基于这个单元的，自己动手的话，一般可以在首页加载的时候在全局js中设置html的font-size。代码如下：if(!clientWidth)return;//这里根据设计稿为750，设置1rem=100px,docEl.style.fontSize=100*(clientWidth/375)+'px';};//abortifbrowserdoesn't支持addEventListenerif(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);3.如果使用sass/less等预编译语言进行更灵活的配置，在上面的方法中配置（当设计稿为750时）：docEl.style.fontSize=40*(clientWidth/750)+'px';在编译函数中配置：@functionpx2rem($px,$base-font-size:20px){@return($px/$base-font-size)*1rem;}这样我们可以直接使用设计稿的尺寸，如：px2rem(100px)，这样就省去了我们自己的计算。如果不使用预编译语言（推荐使用），编辑器也有插件支持单位转换4.以上是根据屏幕宽度设置根元素的font-size。如果设置了不同的initial-scale，我们需要根据设备像素比来设置，通过window.devicePixelRatio获取。四、页面布局方式1、理解html的文档流方式，其实就是流式布局，就是我们需要设置水平方向，垂直方向自动叠加。这更类似于移动端的设计体验。在宽度上，需要采用自适应的方式，比如百分比。如果有相对单位，可以灵活使用相对单位。css3的display:flex也是一个不错的选择，现代浏览器和移动设备基本都支持。2.刚才说体验，很明显，移动端和PC端的体验确实不一样，所以上面的自适应还不够。对于这两种完全不同的体验方式，我们是否需要响应不同的布局和风格？.五、媒体查询1、除了使用js判断不同的设备外，我们还可以设置相对单元使用的根元素。另一种强大的方式是通过css3强大的媒体查询来指定不同的样式。2.媒体查询规则@mediaalland([min-width|max-width|orientation|min-device-width|...]){...}中括号[]表示需要添加的条件,可以是匹配宽/高/横/竖屏/设备类型等。例如min-width:750px表示最小宽度为750px，{}为匹配模式下的样式。还有逻辑判断和/或/不连接不同的规则。3.导入整个文件，可以使用表示：当屏幕大于等于900px，将使用big.css样式渲染网页。4.Bootstrapresponsivedesign这种网格布局就是采用这种方式。六、1px像素边框问题1、除了上面说的在viewport中设置缩放外，也可以直接设置一个空元素来缩放p{width:100px;高度：1px；背景：红色；显示：块；transform:scaleY(.5);}不足：无法实现圆角，实现4个边框比较麻烦，只能单独实现。如果嵌套，会对包含的效果产生不需要的效果，所以这个方案独立使用with:afterandbeforeMore2.使用CSS处理阴影，实现0.5pxbox-shadow的效果：01px1px-1pxrgba(0,0,0,0.5);不足：颜色不好处理，黑色rgba(0,0,0,1)是最深的情况。有阴影，不好用。大量使用box-shadow可能会导致性能瓶颈。四个边框的效果并不理想。3.图片实现，使用background-image实现1px有两种方式：渐变linear-gradient或者直接使用image(base64)。Gradientlinear-gradient(50%colored,50%transparent)div{height:1px;背景图片：-webkit-linear-gradient(top,transparent50%,#00050%);背景位置：左上；背景重复：不重复；background-size:100%1px;}不足：大量使用渐变可能导致性能瓶颈，代码量大，多背景图兼容性问题，使用看https://www.zhangxinxu.com/wo..2.背景图片高清使用上面介绍的媒体查询，如：/*普通显示（设备像素比小于等于1）使用1倍Image*/.css{background-image:url(img_1x.png);}/*高清显示（设备像素比大于等于2）使用2倍图像*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){.css{background-image:网址(img_2x.png);}}/*高清显示（设备像素比大于等于3）使用3倍图像*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){.css{background-图像：网址（img_3x.png）；}}b.image-set实现高清.css{background-image:url(1x.png);/*不支持image-set时显示*/background:-webkit-image-set(url(1x.png)1x,/*在支持image-set的浏览器[普通屏幕]下*/url(2x.png)2x,/*[2xRetina屏幕]用于支持图像集的浏览器*/url(3x.png)3x/*支持图像集的浏览器[3倍Retina屏幕]*/);}C。很多网页对图片没有这么高的要求，不像app，图片一般用2倍高清的图片就可以了。最新的设备仍然可以支持上述属性。对于要求高的应用，使用它。8.移动端点击屏幕产生300ms延迟响应1.原因：浏览器中如何判断速度点击时，当用户点击屏幕上的某个元素时，比如跳转链接，浏览器会抓取先点击，但浏览器无法判断用户是简单点击链接还是双击这部分区域。缩放操作。因此，在捕获第一次点击后，浏览器会保持一段时间t。如果用户在t时间间隔内没有进行下一次点击，浏览器就会点击跳转链接。如果t时间段内用户第二次点击，浏览器将禁止跳转，转而对页面的这部分区域进行缩放操作。那么这个时间间隔t是多少呢？IOSsafari下，大概300毫秒。这就是延迟的来源。带来的后果就是用户只是简单地点击页面，页面需要一段时间才能响应，给用户带来了缓慢的体验。对于web开发者来说，页面js捕获点击事件的回调函数处理需要300ms才能生效，这是间接导致影响其他业务逻辑的处理。2、解决方法：（1）使用fastclick.js，只需要全局添加文件，设置如下：FastClick.attach(document.body);(2)zepto的touch模块，tap事件也是为了解决click的延迟问题，Changethedefaultstyle//Useappearance改变webkitbrowsersinput的默认外观，选择{-webkit-appearance:none;外观：无；}//在winphone下，使用伪元素改变表单元素的默认外观//1.禁用select默认箭头，::-ms-expand修改表单控件的下拉箭头，设置为隐藏并使用背景图装饰select::-ms-expand{display:none;}//2。禁用单选框和复选框的默认样式，::-ms-check修改表单复选框或单选框的默认图标，设置隐藏并使用背景图装饰input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{显示：无；}//3。禁用PC端表单输入框默认清除按钮，修改清除按钮为::-ms-clear，设置隐藏并使用背景图装饰input[type=text]::-ms-clear,输入[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none;}//禁止长按链接和图片弹出菜单a,img{-webkit-touch-callout:none}//禁止ios和android用户选择文本html,body{-webkit-user-select:none;用户选择：无；}//更改输入框占位符的颜色值::-webkit-input-placeholder{/*WebKit浏览器*/color:#999;}:-moz-placeholder{/*MozillaFirefox4到18*/color:#999;}::-moz-placeholder{/*MozillaFirefox19+*/co罗：#999；}:-ms-input-placeholder{/*InternetExplorer10+*/color:#999;}input:focus::-webkit-input-placeholder{颜色:#999;}//onandroid去掉语音输入按钮input::-webkit-input-speech-button{display:none}10.总结1.网站适配的终端可以通过js或者mediaquery获取，以及相应的样式被安排了。2、布局采用相对Units、百分比、弹性方式的f??lex。3.适应移动端的特殊性，比如1px问题，默认样式等。
