移动 web页面rem的使用-CSDN博客

刚睡醒！

后端被迫要写前端的同学们直接看重点，不用搞懂，直接照做就OK了！

写了一两个月JS，好久没有写页面了，尤其是移动web页面。

首先，我们要一个base.css，因为只是入门，所以这个base.css不太规范，比较暴力，不过已经够用了，因为配合上flexible.css，我们先来看base.css:

/*=======base 91========*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    /* 使用box-sizing计算规格，确保不会因部分计算产生多余的宽度导致横向滚动条 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
input,textarea{
    border: none;
    /* 表单元素在移动端往往需要重新定制，大部分时候直接清楚所有样式，-webkit-appearance: none;*/
    outline: none;
    resize: none;
    -webkit-appearance: none;
}复制代码

后端的同学可以直接使用，可直接跳过这段话，在这个base.css里面，先是暴力清除了margin和padding，设置了盒模型的计算方式为border-box，以及浏览器对一些标签元素的触碰高亮的取消，最后一个是清除了inpu和textarea这两个常用的表单元素的原有样式，效果就是如果你样式都不设置，你就只能看到一个闪烁的光标，大多数较简约的网站直接自定义样式给一个padding和border-bottom就够了。

接下来看一下flexible.css，这个是和flexible.js一起配合使用，看到这里如果基础太过薄弱的同学可能会觉得有些混乱，我会在后面给出完整的结合使用的结构，以及告诉你，你需要查询和补充哪些知识，关于flexible.css:

@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}复制代码

后端的同学可以直接使用，可直接跳过这段话，关于flexible.css是对阿里的方案，用来对移动web做适配用的css，这个css中所做到的事情也包括了base.css里面所做到的几样事情，除了box-sizing这个在flexible.css里没有，你可以把box-sizing写进flexible.css，那样就不用base.css了，最后一个文件是flexible.css