Retina 屏幕移动设备 1px 实线边框的实现

很多人初做 H5 页面时都会有这样的经历,用 CSS 定义 1px 的实线边框,在 @2x 的屏幕上会显示成 2px,在 @3x 的屏幕上会显示成 3px,明明希望是极细的线条,到 Retina 屏上却变得粗大丑陋。这是因为 CSS 中的 px 单位定义的是逻辑像素值,而实际显示的效果会以物理像素呈现,Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异。

如果想让 HTML5 页面像 Native App 一样在 Retina 屏幕上显示 1 物理像素的实线,该如何实现呢?
接下来介绍在 @2x 屏幕上的若干实现方案,@3x 同理可得。

一、border-width: 0.5px

2014年的 WWDC 大会上,Ted O’Connor 提到了 iOS 8 和 OS X Yosemite 支持 0.5px,以此实现 “Retina Hairline Border”。

0.5px Retina Hairline Border 的写法

So easy! 不是么?

想法很直接,但旧版 iOS、OS X 和 Android 等无法识别 0.5px 的设备上,多数会解释成 0px,也就是没有边框,这样问题就严重了。

解决方案:

通过 JavaScript 检测浏览器是否支持 0.5px,如果支持,给 <html> 节点添加个 className。

1
2
3
4
5
6
7
8
9
10
11
if (window.devicePixelRatio && devicePixelRatio > 1) {
    var testEle = document.createElement('div');
    testEle.style.border = '.5px solid transparent';
    document.body.appendChild(testEle);
    if (testEle.offsetHeight == 1) {
        document.querySelector('html').classList.add('hairlines');
    }
    document.body.removeChild(testEle);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready
</head></body>

然后 Hairline 的 CSS 就很容易了:

1
2
3
4
5
6
.item {
    border: 1px solid #ccc;
}
.hairlines .item {
    border-width: 0.5px;
}

Demo:http://mutian.wang/demo/2015/hairlines/#line1
Read more about "Retina 屏幕移动设备 1px 实线边框的实现" …

Sublime Text 上最好用的 CSS 格式化插件 —— CSS Format

Sublime Text 的轻巧、开放、免费、跨平台等优点使之成为了最受欢迎的代码编辑器,但长期以来一直没有找到好用的 CSS 格式化插件,于是决定自己动手写一款,方便自己也可以造福广大 CSSer。

下面是对我这款 Sublime Text CSS 格式化插件的介绍:

一、功能

可以将任意的 CSS、SASS、SCSS、LESS 代码格式化为以下形式:

  • Expanded:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
    ol, ul, li {
        margin: 0;
        padding: 0;
    }
    a {
        color: rgba(65, 131, 196, 0.8);
    }
  • Expanded (Break Selectors):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
     
    ol,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
     
    a {
        color: rgba(65, 131, 196, 0.8);
    }
  • Compact:
    1
    2
    3
    
    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
    ol, ul, li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
  • Compact (No Spaces):
    1
    2
    3
    
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,ul,li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
  • Compact (Break Selectors):
    1
    2
    3
    4
    5
    
    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
    ol,
    ul,
    li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
  • Compact (Break Selectors, No Spaces):
    1
    2
    3
    4
    5
    
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,
    ul,
    li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
  • Compressed:
    1
    
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}

Read more about "Sublime Text 上最好用的 CSS 格式化插件 —— CSS Format" …

使用 Sublime、WebStorm 开发 Jade

Sublime、WebStorm (PhpStorm) 是前端开发者的得力工具,开发 Jade 也不例外。

在配置这些软件的 Jade 开发环境前,请先在系统中安装 Node.js 和 Jade :

  1. 安装 Node.js,装好后重启电脑
  2. 安装 Jade
    • Windows:cmd中运行 npm install jade --global
    • Mac:运行 sudo npm install jade --global

配置 Sublime :

  1. 安装 Sublime Package Control,如果已经安装,可跳过本步。安装完成后,需要重启 Sublime Text,如果在菜单 Preferences > Package Settings 中可以找到 Package Control 菜单,则表示已经安装成功。下面会用 Package Control 安装 Sublime 插件,具体方法是:
    • Windows:快捷键 Ctrl+Shift+P 调出命令面板,输入 install 调出 Install Package 选项并回车,稍等片刻,在新弹出的面板中查询所需插件,回车即可安装
    • Mac:快捷键 Cmd+Shift+P 调出命令面板,输入 install 调出 Install Package 选项并回车,稍等片刻,在新弹出的面板中查询所需插件,回车即可安装
  2. 语法支持:通过 Package Control 安装 Jade
  3. 编译工具:
    1. 通过 Package Control 安装 Jade Build
    2. 在菜单 Tools > Build System 中,确认勾选了 Automatic 或 Jade
    3. 使用时,在 .jade 文件中按 Ctrl+B (Mac: Cmd+B) 执行编译,如编译成功会在同级目录下生成 .html 文件
    4. 推荐通过 Package Control 安装 Sublime​On​Save​Build,参考 https://sublime.wbond.net/packages/SublimeOnSaveBuild 进行配置,将 jade 添加到 filename_filter 中,这样每次保存文件即可以自动执行编译。

Read more about "使用 Sublime、WebStorm 开发 Jade" …

Retina 显示屏的网页图片兼容方案

感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率。得益于分辨率的提升,网页中的文字、Flash 和 SVG 内容显示得比原来更加精细,但网页中的大量使用的位图图片却变得异常模糊,存在严重的分辨率适配问题。2010年6月,iPhone4 上市之后,网页图片适配 Retina 显示屏的问题就已出现,经过几年发展,配备 Retina 屏的电子产品越来越多,如今 Apple 又将 Retina 技术应用到了 Macbook Pro 上,网页图片在 Retina 显示屏上的适配问题已经变得迫在眉睫。

接下来为大家分享几种适配方案,供大家参考。

1. <img> 标签引用的图片

我们以一张 300*200px 的照片为例:

1
<img src="./photo.jpg" style="width:300px;height:200px;" />

如果想让这张图片在 Retina 屏幕下达到应有的显示分辨率,只需使用该照片的源文件导出一张清晰的 600*400px 的图片,我们将其命名为 photo@2x.jpg,替换现有的图片即可:

1
<img src="./photo@2x.jpg" style="width:300px;height:200px;" />

换成 @2X 图片,在 Retina 屏幕下的显示就清晰多了,可谓细节毕现。不过在普通屏幕下,图片的显示需要经过浏览器的压缩,一些老版本浏览器如 IE6、7 会显示得非常失真,同时大尺寸的图片会占用更多的带宽,增加页面加载的时间,降低用户体验。通过 JS 的辅助,可以让图片在普通屏幕和 Retina 屏幕下做到自动适配:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<img class="photo" src="./photo.jpg" style="width:300px;height:200px;" />
 
<script type="text/javascript">
$(document).ready(function () {
    if (window.devicePixelRatio > 1) {
        var images = $("img.photo");
        images.each(function(i) {
            var x1 = $(this).attr('src');
            var x2 = x1.replace(/(.*)(\.\w+)/, "$1@2x$2");
            $(this).attr('src', x2);
        });
    }
});
</script>

Retina.js 提供了更加完善的解决方案,自动匹配屏幕分辨率的同时,还可以检测服务器上是否存有当前图片的 @2X 版本,以决定是否替换。
Read more about "Retina 显示屏的网页图片兼容方案" …

Page 1 of 19 :[1]23456789>|