移动端超级好用的reset.css(只做参考哦具体以你们实际项目需求为准)
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(只做参考哦具体以你们实际项目需求为准)的更多相关文章
- 移动端(处理边距样式)reset.css
移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...
- Reset CSS:只选对的,不选"贵"的
玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...
- 打造自己的reset.css
http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...
- 1.reset.css的设置
/* reset css */ *, ::before, ::after{ /*选择所有的标签 */ margin: 0; padding: 0; /*清除移动端默认的 点击高亮效果*/ -webki ...
- Reset.css和Normalize.css样式表初始化相关
(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...
- HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
随机推荐
- 【转载】Java中StringTokenizer类的作用
StringTokenizer是一个用来分隔String的应用类,相当于VB的split函数.1.构造函数public StringTokenizer(String str)public String ...
- 【转载】AsyncTask用法
在开发Android应用时必须遵守单线程模型的原则: Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.在单线程模型中始终要记住两条法则: 1. 不要阻塞UI线程 2. 确保只 ...
- 编程方式取得Spring上下文的Properties
在spring初始化时,可以使用Properties配置器把properties文件装载到Spring的上下文中. ... xmlns:context="http://www.springf ...
- Ntrip通讯协议1.0
Ntrip通讯协议1.0 1 什么是Ntrip? CORS(Continuously Operating Reference Stations)就是网络基准站,通过网络收发GPS差分数据.用户访问CO ...
- BZOJ_1264_[AHOI2006]基因匹配Match_树状数组
BZOJ_1264_[AHOI2006]基因匹配Match_树状数组 Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种 ...
- web_html-day1
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- Block 与 delegate
代理设计模式对于iOS开发的人来说肯定很熟悉了,代理delegate就是委托另一个对象来帮忙完成一件事情,为什么要委托别人来做呢,这其实是MVC设计模式中的模块分工问题,例如View对象它只负责显示界 ...
- DB Link 去除域名
1.查看global_name的设置 SQL> show parameters global_name; NAME TYPE ...
- python __builtins__ copyright类 (14)
14.'copyright', 版权 class _Printer(builtins.object) | interactive prompt objects for printing the lic ...
- hdu1102 Constructing Roads 基础最小生成树
//克鲁斯卡尔(最小生成树) #include<cstdio> #include<iostream> #include<algorithm> using names ...