移动端超级好用的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,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
随机推荐
- 【系列】 2-SAT
bzoj 1997 Planar 题目大意: 给一个存在曼哈顿回路的无向图,求该图是否为平面图 思路: 先把曼哈顿回路提出来,则剩下的边的两个端点若有$ABAB$的形式则这两条边必定一个在环外一个在环 ...
- POJ1228:Grandpa's Estate(给定一些点,问是否可以确定一个凸包)
Being the only living descendant of his grandfather, Kamran the Believer inherited all of the grandp ...
- UIWindow学习
写在前面 本文内容绝大部分都参考唐巧大神的<iOS开发进阶>,只是结合不是特别长的开发经验加以补充:最后基于UIWindow自定义了一个类似于微信的ActionSheet. UIWindo ...
- codeforces round 421 div2 补题 CF 820 A-E
A Mister B and Book Reading O(n)暴力即可 #include<bits/stdc++.h> using namespace std; typedef lon ...
- HTTP 请求的组成 方法 已经 请求的状态码
HTTP请求是指从客户端到服务器端的请求消息. 包括:消息首行中,对资源的请求方法.资源的标识符及使用的协议.从客户端到服务器端的请求消息包括,消息首行中,对资源的请求方法.资源的标识符及使用的协议. ...
- 模态对话框 DoModal的用法 (vs2008)与非模态对话框
Windows对话框分为两类:模态对话框和非模态对话框. 模态对话框,当它弹出后,本应用程序其他窗口将不再接受用户输入,只有该对话框响应用户输入,在对它进行相应操作退出后,其他窗口才能继续与用户交互. ...
- 算法学习--Day1
为了冲刺研究生初试,我准备在课余时间捡起往日的算法.多多练习算法题目,提前准备算法的机试. 今天是4月14日,距离算法考试还有两个月的时间吧,这两个月的所学所得我就都记录在这里了.不仅仅包括算法的准备 ...
- 【Codeforces自我陶醉水题篇~】(差17C code....)
Codeforces17A 题意: 有一种素数会等于两个相邻的素数相加 如果在2~n的范围内有至少k个这样的素数,就YES,否则就NO; 思路: 采用直接打表,后面判断一下就好了.那个预处理素数表还是 ...
- hdoj1575【矩阵快速幂】
题意:非常清晰! 直接搞吧. #include <iostream> #include <stdio.h> #include <string.h> #include ...
- 关于使用IQKeyBoardManager键盘还是被遮挡的问题解决方案
今天在做一个登录界面的时候发现使用了IQKeyBoardManager键盘还是被遮挡,解决方案如下 解决方案一:在所有视图的最外层添加一个UIView作为容器即可,但在有导航栏的情况下导航栏会跟着向上 ...