美文网首页
移动端reset.css 代码

移动端reset.css 代码

作者: 唯吾听烟雨 | 来源:发表于2021-01-27 10:37 被阅读0次

    做pc端页面时,一直用的是淘宝的reset.css。
    移动端的话,跟PC端又有些许不同,就又专门找了移动端的reset.css代码。
    有一个版本的就很不错

    @charset "utf-8";
    html{background-color:#fff;color:#000;font-size:12px}
    body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
    body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
    h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
    h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
    h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
    address,cite,dfn,em,i,optgroup,var{font-style:normal}
    table{border-collapse:collapse;border-spacing:0;text-align:left}
    caption,th{text-align:inherit}
    ul,ol,menu{list-style:none}
    fieldset,img{border:0}
    img,object,input,textarea,button,select{vertical-align:middle}
    article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
    audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
    blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
    textarea{overflow:auto;resize:vertical}
    input,textarea,button,select,a{outline:0 none;border: none;}
    button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
    mark{background-color:transparent}
    a,ins,s,u,del{text-decoration:none}
    sup,sub{vertical-align:baseline}
    html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
    body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
    hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
    a {color: #25a4bb;text-decoration: none;}
    
    
    

    其中大家有注意到吗,html那一行的font-size的大小是50px;

    为什么呢?

    这是因为在移动端设备中,一般采用的是rem的布局方式
    rem是要相对html的字号大小的,也就是相对于50像素
    且一般移动端的设计稿给的都是二倍像素 这样就需要一定的计算 将设计稿中的px转换成rem单位

    举个例子
    设计图中高度是66px;
    因为它是二倍的,因此其实我们代码中实际应该写成33px;
    但是因为我们的单位变成了rem,所以要去计算 使得最后rem要等于实际的px大小 即33px;
    rem单位的尺寸 * html中字号大小 = 33px; → rem = /字号大小 → rem = 33/50 = 0.66
    66px → 0.66rem
    是不是就很方便计算呢?

    因此,如果是引入了这个reset.css的话,在后面书写css时直接像上面那样转换即可,非常简便呢~

    相关文章

      网友评论

          本文标题:移动端reset.css 代码

          本文链接:https://www.haomeiwen.com/subject/vywozktx.html