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" …

Page 1 of 47 :[1]23456789>|