html {
color: #333;
/*规定主色调,依据业务场景(非必须)*/
background: #F6F6F6;
/*规定主背景,依据业务场景(非必须)*/
overflow-y: auto;
/*如果有溢出自动形成滚动条*/
-webkit-text-size-adjust: 100%;
/*不想让iPhone横坚屏切换的时候调节文字*/
-ms-text-size-adjust: 100%;
} html * { /*所有元素*/
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去除移动端开发点击事件灰色背景如a标签*/
} body,html{
height: 100%;
}
article,
aside,
blockquote,
body,
button,
code,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
margin:;
padding:;
} input,
select,
textarea {
font-size: 100%;
} table {
border-collapse: collapse;
border-spacing:;
} fieldset,
img {
border: none;
} address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight:;
} ol,
ul {
list-style: none;
} h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight:;
} q:after,
q:before { /*在<q></q>标签之间的文字两头加上引号*/
content: '';
} a{
text-decoration: none;
} /*input*/
button {
border: none;
} button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
-webkit-appearance: button; /*渲染成button的风格*/
text-transform: none;
outline: none;
} input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999; /*输入框提示语的字体样式*/
} input::-webkit-inner-spin-button {/*解决input的type="number"在部分手机端会出现一个小按钮*/
-webkit-appearance: none;/*去除系统默认appearance的样式,常用于IOS下移除原生样式*/
} input::-webkit-outer-spin-button {/*解决input的type="number"在部分手机端会出现一个小按钮*/
-webkit-appearance: none;
} textarea {
vertical-align: top;
} button,
input {
line-height: normal;
} select {
margin:;
outline:;
} input.fixAKeyboard:focus,
textarea.fixAndroidKeyboard:focus {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
} input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
} button,
input[type=button],
input[type=checkbox],
input[type=reset],
input[type=submit],
label {
cursor: pointer;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
} input[type=submit] {
-webkit-user-modify: read-plaintext-only;
-moz-user-modify: read-plaintext-only;
-ms-user-modify: read-plaintext-only;
-o-user-modify: read-plaintext-only;
user-modify: read-plaintext-only;
} input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
} input[type='search'] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
} /*flex box*/
.flex {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
-webkit-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
} .justify-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
} .justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
} .vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
} *,
*:before,
*:after {
box-sizing: border-box; /*所有元素以border开始计算盒子大小*/
} .clearfix:after,
.clearfix:before { /*清除浮动*/
content: " ";
display: table;
} .clearfix:after {
clear: both;
} .fl {
float: left;
} .fr {
float: right;
}

百分比布局,也叫做流式布局;
清除移动端默认的点击高亮效果:-webkit-tap-highlight-color:transparent;
base.css:
*,::before,::after{
padding:0;
margin:0;
-webkit-box-sizing:border-box; //主流浏览器做兼容;
box-sizing:border-box;
}

input{
border:none;
outline:none;
-webkit-appearance;//清除移动端默认的表单样式;如内阴影效果;
}

布局时候搜索框包一个form可以实现小键盘的箭头变为搜索二字;

移动端超级好用的reset.css(只做参考哦具体以你们实际项目需求为准)的更多相关文章

  1. 移动端(处理边距样式)reset.css

    移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...

  2. Reset CSS:只选对的,不选"贵"的

    玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...

  3. 打造自己的reset.css

    http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...

  4. 1.reset.css的设置

    /* reset css */ *, ::before, ::after{ /*选择所有的标签 */ margin: 0; padding: 0; /*清除移动端默认的 点击高亮效果*/ -webki ...

  5. Reset.css和Normalize.css样式表初始化相关

    (1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...

  6. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...

  7. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  9. 关于reset.css的疑问:为什么一定要重置浏览器样式?

    自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...

随机推荐

  1. android按压背景

    android:background="?android:actionBarItemBackground"

  2. 仿照 QQ 的 cell 的左滑删除、置顶、标记未读效果

    侧滑删除.置顶.取消关注,在iOS8之前需要我们自定义,iOS8时苹果公司推出了新的API,UITableViewRowAction类,我们可以使用该类方便的制作出如下图的效果. 下面是实现的主要代码 ...

  3. sscanf非常的重要

    刚进研究生阶段,发现曾经学习的c语言真的好少好少,很少能够看见scanf printf等..... 以后实验的80%以上都是在linux下面 老师让我看看关于一个日志会聚的一个项目模块 发现基本上都是 ...

  4. CodeForces 712C Memory and De-Evolution (贪心+暴力)

    题意:现在有一个长度为 x 的正三角形,每次可以把一条边减小,然后用最少的时间变成长度为 y 的正三角形. 析:一开始,正着想,然后有一个问题,就是第一次减小多少才能最快呢?这个好像并不好确定,然后我 ...

  5. 51nod1163【贪心】

    思路: 我们可以说: ①:价值大的不管时间早晚,都可以取,时间较晚的,本身就可以取,那么肯定是大的在前面取,但是在最前面那也是不对的,那么条件就是在规定的时间内,大的就是取了,因为他大,OK. ②:只 ...

  6. PTA 2-1 列出连通集【DFS+BFS基础】

    给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序访问邻接点. 输入格式: 输入第1 ...

  7. bzoj 3365: [Usaco2004 Feb]Distance Statistics 路程统计【容斥原理+点分治】

    统计在一个root下的两个子树,每个子树都和前面的运算一下再加进去对于这种需要排序的运算很麻烦,所以考虑先不去同子树内点对的算出合法点对个数,然后减去每一棵子树内的合法点对(它们实际上是不合法的,相当 ...

  8. [Swift]有用的Binary Heap Type类

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. npm install 各种后缀 --xx说明

    npm install xx -g 首先是在npm install xx 命令后面加 -g 它表示将当前包上下文(即,当前工作目录)安装为全局包. npm install (没有参数),在本地node ...

  10. Xor-sequences CodeForces - 691E || 矩阵快速幂

    Xor-sequences CodeForces - 691E 题意:在有n个数的数列中选k个数(可以重复选,可以不按顺序)形成一个数列,使得任意相邻两个数异或的结果转换成二进制后其中1的个数是三的倍 ...