在已模块化与整合压缩的大环境下,不会存在因为这个多一次请求而影响性能。对于老项目,也可以选择把 reset.css 整合到 common.css 中;
对众多 html 标签样式重置也不会有任何影响,因为各浏览器也有个 reset,是浏览器默认样式;
至于说“多了一次不必要的计算,因为后期还可能被样式覆盖掉”,针对这种说法,做一个测试,对于上万标签的样式覆盖计算的性能影响可以忽略不计。
用与不用与什么有关呢?时间成本?流量?代码洁癖?我觉得这是无休止的话题,每个人、项目情况不一样,不能一概而论。我曾经不用,我处女座,我曾经代码洁癖,我现已磨平了棱角。
先网上找一个 reset.css,大同小异,无非就是有的标签多一点、有的属性值多点,有的更适合移动端一点,然后在这个 reset.css 上根据移动端和国情做一些调整:
关于字体,因为各个手机有自己的默认字体,且不是微软雅黑,所以无需设置中文字体,对于英文和数字,看需求,如果用手机默认字体则无需设置,如果要表现一致可用 Helvetica,各个系统都支持,并且绝大部分字体表现一致(即使同一个字体,在不同操作系统、同一操作系统的不同版本中也可能存在细微差别)。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
对于可点击的元素,默认会有个灰色背景,将其取消。
1px 边框通用设置。
body {-webkit-text-size-adjust: 100% !important;-webkit-font-smoothing: antialiased;}
前者仅用来解决 iOS 下修改系统默认字号可能导致页面文本溢出问题;后者仅用来让 MacOS 下让字体看起来细腻平滑。
关于刘海屏的安全区域,这个看需求,有的需要在安全区内,有的就要屏幕全覆盖。所谓“安全区”是直译过来的,其实就是页面展示在上下刘海或横条内部,保证内容不会被刘海和屏幕底部横条遮挡。其实跟安不安全关系不大,也是看需求。
body{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
}
/*
constant:小于IOS11.2版本生效
env:大于IOS11.2版本生效
还需要配合 <meta name="viewport" content="viewport-fit=cover>
*/
去除 iPhone 默认 input 样式。
input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{ outline: none;}
input{-webkit-appearance:none; resize: none; border-radius: 0;}
整理后,有了当前版本。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。