分类目录归档：css

css

连续文本CSS处理方法

2014/04/09 Jace 发表回复

好久没有写博客了，把老文章发出来！

1.问题描述

在宽度有限的情况下，CJK文本和常规西文单词在遇到容器边界时通常会自动换行显示。

图1 文字自动换行(查看多语种文本自动换行DEMO)

但是长连续文本（如连续字母、连续数字、URL等）会撑破容器在单行内显示，如图2。为了解决这个问题，我们通常会使用样式：word-wrap: break-word（当内容超过容器边界时是否断开转行），效果见图3。

图2 长连续文本撑破容器单行显式

图3 长连续文本自动换行（使用word-wrap:break-word 后）

图4显示的是长连续字符与其他常规单词或汉字混排时的表现，这也是测试同事经常用来检测样式表现的用例。通常情况，测试同事会指出连续文本应当紧跟在汉字或短单词的后面显示，即图5显示的效果。为了实现这个效果，我们可以使用word-break: break-all（控制文本的字内换行行为）来解决，这也是原来的Qzone Feeds中使用的方法。

图4 中文、常规单词与长连续文本混排

图5 中文、常规单词与长连续文本混排（使用word-break:break-all 后）

但这会造成展现效果不符合排版规则：

（1）常规单词在不恰当位置断字，如图6。

在行尾的单词由于太长而无法完全放下时，使用了该属性后单词会在行尾的字母处断开，并没有遵循断字规则。不同书写系统的断字规则不尽相同，西文的断字通常是在音节处断字，并在行尾使用连字符连接。如Congratulation的可断字点包括：

Con-grat-u-la-tion

从图6可以看出每行行尾的单词都被非恰当断字，严重影响了内容的连续阅读。

图6 英文单词在非恰当处断字

（2）标点符号可能出现在不当位置，影响美观。

前置标点（不允许出现在行末的标点）：

$([{£¥•‘“〈《「『【〔〖〝﹙﹛﹝＄（．［｛￡￥

后置标点（不允许出现在行首的标点）：

!%),.:;>?]}¢¨°•ˇˉ―‖’”…‰′″›℃∶、。〃〉》」』】〕

〗〞︶︺︾﹀﹄｝］）！＂％＇），．：；？）｀｜）～￠

图7 标点符号不符合排版规则

2.长URL处理

Feed的评论中可能会有链接出现，在去除word-break:break-all后，文字和url之间可能会出现较大的空隙，如图8。针对这种情况，我们可以只对评论内的url做word-break:break-all处理。

图8 文字与长URL之间有较大间隙

3.结论

为了保证常规文本的阅读体验，建议对常规文本不使用word-break:break-all，链接特殊处理，将图4的效果视为正常表现。

css

利用css @viewport 做设备适配

2013/11/09 Jace 发表回复

在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。

Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签，其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率，使得viewport meta标签被广泛使用。

viewport meta标签是用做布局的，这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的设备适配方法的原因，将HTML对viewport的控制转交给CSS。

@viewport CSS 规则

使用@viewport规则控制viewport，与使用meta标签的效果相同，只是我们完全使用CSS来控制。与使用meta标签一样，仍然建议使用设备无关的值（device-width）来设置viewport宽度。

@viewport {
   width: device-width;
}

如今，也有很多开发者已经在使用@viewport了，因为在IE10的捕捉模式（snap mode）下，Windows 8 Metro模式下的一个特性，可以将浏览器拖至屏幕的左端或右端，同时使用两个窗口。奇怪的是，在viewport小于400px的时候，IE10忽略了viewport meta标签，所以依赖meta标签的站点，在这种小窗口下是没有优化效果的。要解决这个问题，开发者就要使用上面介绍的device-width方法，或者在media query里面使用@viewport规则。

@viewport 与 Media Queries配合使用

我们可以在media query里面使用@viewport，已达到更加精准的优化。比如，下面的media query将viewport小于400px（IE10 的捕捉模式）缩放至320px宽。

@media screen and (max-width: 400px) {
   @-ms-viewport { width: 320px; }
   ...
}

@viewport 描述符（Descriptors）

zoom描述符等同于viewport meta 标签的initial-sacale属性。

@viewport {
   width: device-width;
   zoom: 2;
}

与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。

@viewport {
   width: device-width; 
   max-zoom: 3; 
   min-zoom: 0.50; 
}

user-zoom与user-scalable属性等效。

@viewport {
   width: device-width;
   user-zoom: fixed;
}

浏览器支持情况

仅IE10/11 , opera 已支持，且需要厂商前缀。

@-ms-viewport {
   width: device-width;
}
@-o-viewport { 
   width: device-width;
}
@viewport {
   width: device-width; 
}

所以，目前我们还是需要viewport meta 标签。

后记

用此方法可以解决 Windows Phone IE浏览下，定位在底部（bottom:0）的元素与底部有间距的问题。

参考：

css、页面布局

[老法新用]使用padding-top:(percentage)实现响应式背景图片

2012/11/20 Jace 3条评论

处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的 <img> 元素，其高度会随着宽度的变化自动调整，且其宽高比不变。如果想在背景图片中实现同样的效果，我们必须先解决如何保持HTML元素的宽高比。

固定宽高比

我们将用到一个保持元素宽高比的技巧：为元素添加垂直方向的padding值，padding值使用百分比。这是因为垂直方向的padding取值使用百分比时，其值是相对于包含块的宽度而定的[参考Box model]。这个技巧最早在Creating Intrinsic Ratios for Video一文中用来创建固有比率的视频，查看demo。

假设我们有一张800*450px的图片，我们需要创建一个元素在其宽度变化时，它的宽高比仍保持16:9。代码如下：

<div class="column">
  <div class="figure"></div>
</div>

.column{
  max-width: 800px;
}
.figure{
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}

自己动手试试吧

添加背景图片

上面我们实现了元素缩放并保持宽高比。但是此时如果我们添加了背景图片，它并不能跟随元素一起自动缩放。还需要添加background-size:cover。使用这个属性让背景铺满元素的缺点是IE8及以下浏览器不支持，为了使IE下的效果可以接受，可以使用background-position将背景图片居中显式。我们必须要保证图片的宽度至少要与元素的max-width一样大。这样的话元素的宽度永远不会比图片大，如果元素小于图片时，图片将被裁剪。

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
  background-image: url(http://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}

再动手试试吧

流动宽高比

我们可以更深入一步。假设我们有一张在桌面浏览器下显式很好的宽屏图片，在移动设备上我们不想使用相同的宽高比，要不然图片会很小。又或者是我们不想使用相同的高度，因为图片可能会过高。

这个效果可以通过较少padding的百分比值和为元素设置一个高度来实现。假设我们的大图是800*200px，我们打算在元素的宽度减少到300px的时候，背景图片的高度为150px。现在我们计算下height和padding-top属性值。

上图显式了两个尺寸的关系。坡度线(slop)对应于padding-top属性，开始高度(start height)对应于height属性，它表示元素在宽度为零时的高度。调整样式如下：

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}
figure.fluidratio {
  padding-top: 10%;  /* slope */
  height: 120px;  /* start height */
  background-image: url(http://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}

动手试试吧

REF:

css

box-sizing轻松更改盒模型大小计算方式

2010/08/24 Jace 发表回复

注：请在标准浏览器下查看。

标准浏览器未设置-moz-box-sizing属性时的默认布局

width: 160px; border: 10px solid rgb(255, 0, 0); padding: 5px; height: 200px;

标准浏览设置box-sizing:content-box时的布局

width: 160px; border: 10px solid rgb(255, 0, 0); padding: 5px; height: 200px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box; box-sizing:content-box;

标准浏览设置box-sizing:border-box时的布局

width: 160px; border: 10px solid rgb(255, 0, 0); padding: 5px; height: 200px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; box-sizing:border-box;

css

CSS3制作多角星

2010/08/20 Jace 发表回复

原文：CSS3 Starbursts

http://matthewjamestaylor.com/blog/css3-starbursts

最近我体验了下css3的rotation（旋转）属性，发现可以用来制作多角星而且不用使用图片。我们所需要的只是一些嵌套的块级元素，通过为它们设置不同的旋转角度来实现。通过设置rotation可以将盒子的角（corner）沿着星星的圆周分布。

首先，我创建了一个16角星，通过使用三个包含在a标签内的嵌套的span元素实现，效果如下图所示：

上面的星星效果只能在支持CSS3 rotation属性的浏览器下看到，目前有safari，Firefox和Google chrome。其他浏览器下就被优雅降级为一个普通的黄色方块。我把在safari下的效果截图贴上，以便于你可以看到在现代浏览器下的效果。继续阅读CSS3制作多角星 →

进步博客