移动端 CSS 适配笔记

红米手机 1 - 圆角外背景色溢出

当我们在做手机 app 开发的时候常常会用到 Webview 模式，ui 部分全部用 html 和 css 来实现。

遇到一个问题，对一个 dom 元素设置了圆角 border-radius:10px;background:#fff。 在红米下，四个圆角外面会溢出白色的背景。蛋疼。

解决方法：

在 dom 的样式上加上 background-clip:padding-box; 好吧，问题解决了，原因不明，只能说红米 1 是奇葩。

安卓浏览器，去除点击时的黄框

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

-webkit-text-size-adjust

1、当样式表里 font-size < 12px 时，中文版 chrome 浏览器里字体显示仍为 12px，这时可以用

html {
  -webkit-text-size-adjust: none;
}

2、-webkit-text-size-adjust 放在 body 上会导致页面缩放失效

3、body 会继承定义在 html 的样式

4、用 -webkit-text-size-adjust 不要定义成可继承的或全局的

取消聚焦的样式

input {
  outline: none;
}

禁用页面选择

禁止页面文字选择 ，此属性不继承，一般加在 body 上规定整个 body 的文字都不会自动调整

body {
  -webkit-user-select: none;
}

解决 Chrome 下表单自动填充后背景色为黄色

Chrome 默认填充的背景色不能修改，既然设置不了背景色, 就利用白色阴影填充：

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

css 让 table 的边框合并

table td {
  border-collapse: collapse;
}

CSS 文字自动换行

解决有时候不换行的情况，但不完美

.class-name {
  word-break: break-all;
  word-wrap: break-word;
}

合并 margin

-webkit-margin-collapse

这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的 margin 会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

最常见的例子就是两个相邻的 <p> 元素会共享他们的 margin 值。想要控制这个表现，我们可以使用 -webkit-margin-collapse 及其分拆后的 -webkit-margin-top-collapse、-webkit-margin-bottom-collapse 等属性。默认值是 collapse，值 separate 则停止共享 margin 值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

用 CSS 让网站变灰

这个就不多解释了，让网站所有元素变成灰色调，全浏览器支持，使用了滤镜，比较吃性能，建议作临时方案使用。

代码如下：

body {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: gray;
}

在 Retina 屏幕下显示变模糊的问题，可以加上：

body {
  ... -webkit-transform: translateZ(0);
  ...;
}

CSS 画三角

其实梯形什么的也能用这个方法实现

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

字体两端对齐

最近发现了可以利用 text-align-last: justify; 实现字体两端对齐。

示例代码如下：

<style>
  .label {
    display: inline-block;
    width: 4em;
    text-align-last: justify;
  }
</style>
<div>
  <span class="label">性别</span>
</div>
<div>
  <span class="label">出生日期</span>
</div>

使 IFRAME 在 iOS 设备上支持滚动

在使用 IFRAME 或者其他 HTML 元素时，你需要使用一个元素（如 DIV) 来包装他们：

<div class="scroll-wrapper">
  <iframe src=""></iframe>
</div>

这个 DIV 将作为支持内部滚动的基础容器。

要让 IFRAME 支持滚动，需要一个常用的 CSS 属性和一个很少人知道的 CSS 属性:

.scroll-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  /* 提示：请在此处加上需要设置的大小 (dimensions) 或位置 (positioning) 信息！*/
}
.scroll-wrapper iframe {
  /* 你自己指定的样式 */
}

-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出时需要滚动的元素设计的。 如果没有指定这个属性，当你想滚动 iframe 时，实际上会导致外层页面的滚动，通过它你就可以对 IFRAME 的滚动进行控制！在原作者的博客站点中，使用了下面的 CSS:

.demo-iframe-holder {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}

记得有这个 CSS 属性是设置在包装元素上，而不是设置到滚动元素自身上面的！

响应式布局 @media

CSS 语法

@media mediatype and|not|only (media feature) {
  /* CSS-Code; */
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css" />

媒体类型(mediatype)

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。 应用于盲文触摸式反馈设备
embossed	已废弃。 用于打印的盲人印刷设备
handheld	已废弃。 用于掌上设备或更小的装置，如 PDA 和小型电话
print	用于打印机和打印预览
projection	已废弃。 用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。 用于电视和网络电视

媒体功能(media feature)

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于 0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于 0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于 0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。