1。字体换行超出显示省略号p{text-overflow:ellipsis;overflow:hidden;}white-space:normal|pre|nowrap|pre-wrap|pre-line|inherit;white-space属性设置如何处理元素内的空白正常默认值。空白被浏览器忽略。pre空白由浏览器保留。它的行为类似于HTML中的pre标签。nowrap文本不会换行，文本会在同一行继续，直到遇到br标签。pre-wrap保留空白序列，但正常换行。pre-line合并空白序列，但保留换行符。inherit指定white-space属性的值应该从父元素继承。自动换行：正常|断字；word-wrap属性用于指示浏览器是否允许在单词内断句，这是为了防止当字符串太长而无法找到其自然断点时溢出。normal：仅在允许的断点处中断（浏览器保持默认处理）break-word：在长词或URL地址内中断。word-break属性用于指示如何在单词中断开句子。normal：使用浏览器默认的换行规则。break-all：允许在单词内换行keep-all：只能在半角空格或连字符处换行，强制不换行span{display:inline-block;溢出：隐藏；/*超出隐藏部分*/text-overflow:ellipsis;/*如果内容超出显示为省略号*/white-space:nowrap;/*强制不换行*/}CSS自动换行span{display:inline-block;断字：正常；/*自动换行*/}强制换行span{display:inline-block;断字：全部中断；/*强制英文单词换行*/}2.移动端自适应使用媒体查询@media(min-width:768px){.main{width:25%;向左飘浮;}}linkrel="stylesheet"type="text/css"media="screenand(min-width:400px)and(max-device-width:600px)"href="smallScreen.css"/>宽度使用百分比由于网页会根据屏幕宽度调整布局，所以尽量使用百分比，使用相对单位rem。设计稿给什么尺寸，我们就缩小100倍，最后换算成rem单位。比如设计稿上某个标题的font-size是32px，此时写CSS样式的时候会直接缩小100倍，即0.32rem。html元素的具体尺寸=设计稿尺寸/100*（不同设备的理想视口宽度/参考值（即设计稿的水平像素）*100）（单位px）当1（单位rem）=html根元素的font-大小=不同设备的理想视口宽度/参考值（即设计稿的水平像素）*100（单位px），html元素的具体大小=设计稿大小/100(unitrem)当deviceWidth大于设计稿水平分辨率时html的font-size始终等于设备理想宽度等于设计稿水平宽度时设置的值。//orientationchange方向改变事件（函数（doc,win){vardocEl=doc.documentElement,//根元素html//判断窗口是否有orientationchange方法，有则赋值给变量，没有则返回resize方法resizeEvt='orientationchange'inwindow?'orientationchange':'resize';recalc=function(){varclientWidth=document.documentElement.clientWidth;if(!clientWidth)return;if(clientWidth>1080)clientWidth=1080;//设置fontSizeof将文档调整到与窗口成比例的大小，以达到响应式的效果。docEl.style.fontSize=20*(clientWidth/1080)+'px';//1080是UI给出的设计稿的水平像素};如果（！doc.addEventListener）返回；win.addEventListener(resizeEvt,recalc,false);//addEventListener事件方法接受三个参数：第一个是事件名比如点击事件onclick，第二个是要执行的函数，第三个是布尔值doc.addEventListener('DOMContentLoaded',recalc,false)//绑定浏览器缩放和加载时间})(document,window);动态设置视口缩放setviewportscaleletdpr=window.devicePixelRatio;letmeta=document.createElement('meta');letinitialScale=1/dpr;letmaximumScale=1/dpr;letminimumScale=1/dpr;meta.setAttribute('name','viewport');meta.setAttribute('content',`width=device-width,user-scalable=no,initial-scale=${initialScale},maximum-scale=${maximumScale},minimum-scale=${minimumScale}`);document.head.appendChild(meta);所以CSS样式可以直接根据设计稿的大小来写，比如设计稿中有5个li元素，宽度为200px。此时li在不同设备下的宽度iPhone5:li{width:200px}实际宽度为：100pxiPhone6:li{width:200px}实际宽度为：100pxiPhone6+:li{width:200px}实际宽度为：66.667px(2)动态计算html的font-sizevarclientWidth=document.documentElement.clientWidth;if(!clientWidth)return;if(clientWidth>1080)clientWidth=1080;document.documentElement.style.fontSize=clientWidth/10+'px';(3)布局时，每个元素的css大小=设计稿标签大小/设计稿水平分辨率/10（计算不便），或者通过css处理器（见下）SASS@baseFontSize:75;//基于模型的水平屏幕尺寸/100，基准font-size@functionpx2rem($value){$para:75px;@return$value/@baseFontSize+rem;}JS//设置根元素的font-size，通过获取不同设备的理想视口宽度，然后除以10。（除以10是因为你不想字体大小太大。）letidealViewWidth=window.screen.width;document.documentElement.style.fontSize=idealViewWidth/10+'px';`font-sizeoftherootelementondifferentdevices`:iPhone5:320px/10=32pxiPhone6:375px/10=37.5pxiPhone6+:414px/10=41.4px根据上面的例子，大家可以看一下。一个设计稿中有5个lis，横向排列，每个lis的宽度为200pxCSS@import(路径名)iPhone5:li{width:px2rem(200px)}=>width:85.333px//此时(200px/75px=2.667rem)2.667rem=2.667*(320/10)=85.3333pxiPhone6:li{width:px2rem(200px)}=>width:100px//此时(200px/75px=2.667rem)2.667rem=2.667*(375/10)=100pxiPhone6+:li{width:px2rem(200px)}=>width:4138px//此时(200px/75px=2.667rem)2.667rem=2.667*(414/10)=110.4138px因此，一个200px宽度的li元素（实际只有100px）在不同设备下显示不同的宽度，实现了响应式适配的问题。3、移动端一像素边框实现设置视口缩放参考（2.移动端自适应-设置视口缩放）内容，可以像PC网页一样使用transform:scaletopborder设置为1pxframe.border-top-1px{position:relative;}.border-top-1px:before{position:absolute;内容：'';-webkit-transform-origin:00;变换原点：00；-webkit-transform:scaleY(0.5);变换：scaleY(0.5)；顶部：0；左：0；宽度：100%；border-top:1px纯绿色；z-index:10;}底边box.border-bottom-1px{position:relative;}.border-bottom-1px:before{content:'';位置：绝对；底部：0；左：0；宽度：100%；border-bottom:1px纯绿色;-起源：00；-webkit-transform:scale(0.5,0.5);变换：比例（0.5，0.5）；-webkit-box-sizing：边框框；box-sizing:border-box;}四个边框。border-1px{position:relative;}.border-1pxinput{position:relative;宽度：100%；高度：30px；填充：010px；边框：无；大纲：无；文本-溢出：省略号；背景：透明；}.border-1px:before{内容：'';位置：绝对；宽度：200%；高度：200%；边框：1px实心#000；-webkit-transform-origin:00;-moz-transform-origin:00;-ms-transform-origin:00;-o-变换原点：00；变换原点：00；-webkit-transform:scale(0.5,0.5);-ms-transform:scale(0.5,0.5);-o-变换：比例（0.5，0.5）；变换：比例（0.5，0.5）；-webkit-box-sizing：边框框；-moz-box-sizing：边框框；box-sizing:border-box;}媒体查询现实.border-bottom{position:relative;border-top:none!important;}.border-bottom::after{content:"";位置：绝对；左：0；底部：0；宽度：100%；高度：1px；背景色：#e4e4e4；-webkit-transform-origin：左下角；transform-origin:leftbottom;}/*2倍屏*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2.0){.border-bottom::after{-webkit-transform:scaleY(0.5);变换：scaleY(0.5)；}}/*3倍屏*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3.0){.border-bottom::after{-webkit-transform:scaleY(0.33);变换：scaleY(0.33)；}}http://caibaojian.com/mobile-...https://www.cnblogs.com/uncle...
