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. dba操作之archivelog清理

    下面的命令用于校验归档日志的有效性,列出无效的归档日志,以及以何种方式清除归档日志,列出几种常用的: crosscheck archivelog all;                        ...

  2. dos窗口出现error:could not open ...jvm.cfg解决方法

    在cmd程序中,运行javac -version查看jdk是多少位时出现错误 error:could not open ...jvm.cfg解决方法 出现这种情况大多是因为电脑上之前安装过JDK,卸载 ...

  3. flask的config配置和给实例化传入参数

    灵活性主要体现在配置上,需要什么就配置什么 from flask import Flask app = Flask(__name__) # type:Flask # 调试模式:是否开启调试模式并捕获异 ...

  4. vue-router 基本知识点

    vue-router就是将组件映射到路由,然后告诉vue-router在哪里渲染它们. 默认路由出口 <router-view></router-view> 使用router- ...

  5. ML 徒手系列说明

    徒手系列正确打开方式: 1.徒手撸公式 2.徒手撸代码

  6. mysite-exampleservice和mysite-vsg

    可能找到了这两个nova安装的地方,下午分析 搜素site_name test 这条线 cord-compute-maas-playbook这条线 这个可以作为验证

  7. 4、html的body内标签之input系列

    一.input标签与form表单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. Struts2基本使用

    Struts2:本质servlet 1.接受页面参数 a.使用原生的ServletAPI接受(不推荐) request.getParameter(name) 获取元素request方式: --Http ...

  9. vim的visual可视模式(转载)

    转自:http://www.cnblogs.com/chenyadong/archive/2011/08/30/2159809.html 为了便于选取文本,VIM 引入了可视(Visual)模式.要选 ...

  10. find 是区分大小写的。对于不区分大小写的写法(转载)

    转自:http://justwinit.cn/post/3633/ 默认情况下,find 是区分大小写的.对于不区分大小写的 find,将 -iname 测试替换为 -name 测试. find do ...