移动端公共样式

最新推荐文章于 2022-10-23 12:34:44 发布

原创最新推荐文章于 2022-10-23 12:34:44 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了移动端开发中的公共样式设置，包括CSS部分的基础样式定义，如何实现字体大小自适应，并通过引入jQuery.min.js文件使JS代码生效。同时，提供了在HTML头部添加相应代码的步骤，以确保整个方案的正常运行。

第一部分：css部分：

/*清除样式*/

body, ol, ul, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea,select{
    margin: 0; padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    position: relative;
}

html, body {
    height: 100%;
}

html {
    position: relative;
    margin: 0 auto;
    max-width: 750px;
    min-width: 300px;
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    position: relative;
    font-size: .14rem;
    font-family: "Microsoft YaHei", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    background: #fff;
    color: #282828;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
    font-size: 14px;
}

a {
    color: #333;
    text-decoration: none;
    transition: color .2s ease-out;
}

a:hover {
    text-decoration: none;
}

em, i {
    font-style: normal;
}

ol, ul, dl, li, dt, dd {
    list-style: none
}

img {
    border: 0;
    vertical-align: middle
}

.boxShadow{
    box-shadow: 0 0 .18rem 0 rgba(0,0,0,0.1);
}

a img {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}
input, textarea {
    font-family: "Microsoft YaHei", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    outline: none;

}

input, textarea {
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    outline: none;
    padding: 0px;
    margin: 0;
}

select {
    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
    /*border: solid 1px #000;*/

    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*在选择框的最右侧中间显示小箭头图片*/
    /*background: url("/static/images/mall/arrow.png") no-repeat scroll 5.5rem center transparent;*/
    background-color: #ffffff;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
/*透明度渐变*/
.opacity{
    -webkit-animation: opacity 0.3s linear;
    animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes opacity {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/*清除浮动*/
.clearfloat{
    zoom:1
}
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
/*居中*/
.center{width: 7rem;margin: 0 auto}
/*flex*/
.flex{
    display: flex;
    display: -webkit-flex;
    align-items: center;
}
.flex-wp{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-wrap: wrap;
}
.flex-jc{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}
*{box-sizing: border-box}

.nowrap{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}

.displayno{display: none}

第二部分：字体大小自适应，添加js


function autobox() {
    var width = $(window).width();
    if (width >= 750) {
        width = 750
    };
    var auto = Number(width) * 100 / 750;
    $('html').css('font-size', auto);
}
autobox();
$(window).resize(function() {
    autobox();
});
function prevent(e){
    e.preventDefault();
};

第三部分：以上js生效，需添加jQ文件：jquery.min.js

详见下一篇文章，文件名：jquery.min.js。

第四部分：html头部添加以下代码：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">