1,移动端页面
最重要的标签&＃xff1a;
在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签&＃xff0c;设置相应属性即可&＃xff0c;如上代码&＃xff0c;name&＃61;”viewport” content中width&＃61;device-width表示浏览器页面宽度等于设备宽度&＃xff08;同理可以设置高度&＃xff0c;也可指定具体值&＃xff09;&＃xff0c;initial- scale&＃61;1表示页面不缩放保持&＃xff0c;mininum-scale&＃61;1和maximum-scale&＃61;1表示允许用户最小缩小至原大小和扩大到原大小&＃xff08;实际 就是不让缩放^^&＃xff09;&＃xff0c;user-scaleable&＃61;no 表示禁止缩放, target- densitydpi &＃61; high-dpi表示适配高分辨率的屏幕&＃xff0c;还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi&＃xff0c;后面的四个定性&＃xff0c;第一个定量&＃xff0c;即dpi_value是DPI值&＃xff0c;device-dpi是使用设备原本的 dpi 作为目标 dp&＃xff0c;不发生默认缩放&＃xff0c;而后面的三个是指dpi取值在一定范围的表示。
2,css3新增样式
强大的CSS属性box-flex
display:-webkit-box;
<ul><li>11li><li>22li><li>33li>
ul>
ul{display:-webkit-box;}
ul li{-webkit-box-flex:1;}
ul li:first-child{background-color:#fafafa;}
ul li:nth-child(2){ background-color:#ccc; }
ul li:last-child{background-color:#fbfbfb; }
效果是这样的&＃xff0c;在浏览器里是居中的&＃xff0c;由于图片颜色问题这里显示不够清楚。
示例2
<div class&＃61;"t-box"><div class&＃61;"demo1"><input placeholder&＃61;"百分百宽度输入框" type&＃61;"text">div>
div>
.demo1{display: -webkit-box;}
.demo1 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border: solid 1px #ddd ;display: block;}
页面就是这个样子的~
-webkit-text-size-adjust:none;
做项目的时候发现一个问题&＃xff0c;就是当竖屏的屏的时候显示效果不错&＃xff0c;但是当横屏的时候&＃xff0c;字体 会变大&＃xff0c;无论你怎么设置字体大小都无效&＃xff0c;后来才知道是text-size-adjust在作怪。浏览器默认会根据当前屏幕和内容作调整&＃xff0c;在webkit内核的浏览器中只需 要-webkit-text-size-adjust:none就禁止自动调整&＃xff0c;至于是否全局活局部使用看自己的项目需求&＃xff08;废话&＃64;-&＃64;&＃xff09;。
京公网安备 11010802041100号