移动端布局css样式

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 26.67vw;
        }
        html,body{
            height: 100%;
            font-family: 'Microsoft YaHei';
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling:touch;
        }
        a{
            text-decoration: none;
            font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
        }
        img{
            border: none;
        }
        ul li,ol li{
            list-style: none;
        }
        p {
            word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */
        }
        .clear{
            zoom: 1;
        }
        .clear:after {
            content: "";/* 用来清除浮动带来的高度塌陷 */
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
        }
        em, i {
            font-style: normal;
        }
        b,strong{
            font-weight: 100;
        }

        /*单行文本省略号*/
        .one-txt{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        /*多行溢出*/
        .many-txt{
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
             -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        
        .overflow {overflow:hidden; }
        
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

以iphone来说,假设设计稿宽度750px;那么计算时是750/100/2,最后得出的是rem动态单位

猜你喜欢

转载自blog.csdn.net/qq_43219422/article/details/89350103