移动端CSS重置
移动端 CSS Reset 该怎么写
为了应对各大浏览器厂商对浏览器默认样式的不统一处理,我们往往会进行一个 css reset 操作,由于没有标准而且受个人偏好影响,每个公司实现的都不尽相同。关于 css reset 的文章也不少,但是其中极少有详细的代码解读。下面是我对于移动端 css reset 的整理,其中会对需要特别关注的点进行注释。
在移动端的我们需要关注哪些点呢?
- 特别针对 IOS 设备的问题
- 滚动容器的问题
- 不同浏览器会给同一种标签的元素设置不同的默认样式
下面是我经常使用的一种 css reset 方式:
@charset "utf-8";
* {
/**
* 简单粗暴, 一劳永逸的写法
*/
padding: 0;
margin: 0;
font: inherit;
vertical-align: baseline;
}
* {
/*
* 这个属性只用于iOS, 当你点击一个链接或者通过Javascript定义的可点击元素的时候
* 它就会出现一个半透明的灰色背景
*/
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
-webkit-text-size-adjust: 100%; /* 禁止字体变化 */
}
body {
font-size: 14px;
font-weight: 400;
font-family: Helvetica,Arial,sans-serif;
line-height: 1;
-webkit-overflow-scrolling: touch; /* 设置滚动容器的滚动效果 */
-webkit-font-smoothing: antialiased; /* 字体抗锯齿渲染 */
}
a, a:active, a:hover {
/**
* 某些浏览器会给 a 设置默认颜色
*/
color: unset;
text-decoration: none;
}
ol, ul, li {
/**
* 去掉列表样式
*/
list-style: none;
}
img {
border: 0;
vertical-align: middle
}
table {
/**
* 去掉 td 与 td 之间的空隙
*/
border-collapse: collapse;
border-spacing: 0;
}
input, textarea, select {
outline: none; /*去掉fouce时边框高亮效果*/
background: unset; /*去掉默认背景*/
appearance: none;
-webkit-appearance: none; /* 去除ios输入框阴影 */
}
/* 禁止选中文本内容 */
*:not(input, select, textArea) {
-webkit-user-select: none;
}
如果有不对的地方或者您有其他建议,欢迎指正或者一起讨论。
移动端CSS重置的更多相关文章
- pc端,移动端css重置样式
pc: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text- ...
- CSS 重置默认样式
1. 概述 1.1 说明 css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果. 备注:浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的 ...
- css重置的各种版本总结
个人手机端常用到的: @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ...
- 移动端 css/html (box-flex)自适应、等比布局
移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- CSS重置样式表
网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- Normalize.css – HTML5-ready 的css重置样式集
Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样 ...
随机推荐
- Django 上下文管理器,为父模板添加动态数据
1.摘要:模板继承可以减少页面内容的重复定义,实现页面内容的重用. 但是当父模板中有动态数据的话,这些动态数据在子模版中是不会显示的.我们可以通过自定义上下文处理器来解决 2.Django上下文处理器 ...
- 第一个,net core项目,一起入门 !!!
最近项目上开始使用.net core,新的项目,熟悉的东西比较多,现在花点时间来梳理一下,重头开始搭建一个.net core项目.哈哈,这个相对老手来说,估计会觉得小儿科,没事,也就当一次分享总结罢了 ...
- Python中io的open()在PyCharm环境下报错和路劲的问题
PS:我也是初学者,上班空闲时间学习学习Python.今天学到io的时候,遇到了两个用PyCharm环境编写代码的小白错误,如下: 两个问题都是如下代码: 1. 第一个问题:当写好代码之后,点击运行报 ...
- javaWeb快速入门+——初体验-HelloWorld
文章转载自 https://www.cnblogs.com/1906859953Lucas/p/10821840.html 练习成品下载 https://www.lanzous.com/i9fljkj ...
- Gin_中间件
gin可以构建中间件,但它只对注册过的路由函数起作用 对于分组路由,嵌套使用中间件,可以限定中间件的作用范围 中间件分为全局中间件,单个路由中间件和群组中间件 gin中间件必须是一个 gin.Hand ...
- Unable to create initial connections of pool. spring boot mysql
Unable to create initial connections of pool. 在链接url里添加 将useSSL=true改为useSSL=false 只能说明服务器没有打开SSL功能
- PP: Tripoles: A new class of relationships in time series data
Problem: ?? mining relationships in time series data; A new class of relationships in time series da ...
- Linux之温故知新1
1.touch命令的使用 2.使用(cd -)可以在上次使用的目录来回切换 3.ls通配符的使用*代表任意字符和任意个字符, ?代表任意一个字符, [12345]中的任意一个字符, [1-5]中的任意 ...
- Gogs的Docker容器化部署流程遇到的问题
Gogs的Docker容器化部署流程遇到的问题 最近在学习CI/CD的一些方案,个人比较青睐容器化轻量级.CI方面一开始是想使用gitlab的,但是发现我自己买的服务器配置太低,内存根本不够(大写 ...
- 控制台输出Scanner和BufferedReader区别
Scanner取得输入的依据是空格符,包括空格键,Tab键和Enter键.当按下这其中的任一键 时,Scanner就会返回下一个输入. 当你输入的内容中间包括空格时,显然,使用Scanner就不能完整 ...