移动端页面开发总结（三）
CSS reset
清除浮动
禁止换行 超出文本用省略号代替
使文本文字两端对齐
CSS判断横屏竖屏
?取消长按复制 获取长按复制
?
?
?
?
@charset "utf-8";
html{
-webkit-text-size-adjust:none;
-webkit-user-select:none;
-webkit-touch-callout: none;
font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
font-size:24px;
}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{
margin:0;
padding:0;
font-weight: normal;
}
a,button,input,textarea,select{
background: none;
-webkit-tap-highlight-color:rgba(255,0,0,0);
outline:none;
-webkit-appearance:none;
}
ol,ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:none;
text-decoration: none;
}
table{
border-collapse:collapse;
border-spacing: 0;
}
textarea{
resize:none;
overflow:auto;
}
清除浮动
.clearfix{
zoom:1;
}
.clearfix:after {
clear:both;
display:block;
height:0;
content:"";
visibility:hidden;
}禁止换行 超出文本用省略号代替
.no-wrap-ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}使文本文字两端对齐
.text-justify{
text-align:justify;
text-justify:inter-ideograph;
}CSS判断横屏竖屏
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}?取消长按复制 获取长按复制
.text-nocopy {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.text-copy{
-webkit-touch-callout:text;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}?
?
?
?
