不同retina，显示高度不一样，很显然最细的线条最美

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            padding:0;

            margin:0;

            box-sizing: border-box;

        }

        .box{

            width:100%;

            height: 1px;

            background: red;

            margin-top: 50px;

        }

        @media (-webkit-min-device-pixel-ratio: 2){

            .box2{

                transform: scaleY(.5)

            }

        }

        @media (-webkit-min-device-pixel-ratio: 3){

            .box3{

                transform: scaleY(.333)

            }

        }

        @media (-webkit-min-device-pixel-ratio: 4){

            .box4{

                transform: scaleY(.1)

            }

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <div class="box box2"></div>

    <div class="box box3"></div>

    <div class="box box4"></div>

</body>

</html>

　　

关于不同retina的布局的更多相关文章

  1. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. 使用视 meta 标签来控制手机浏览器布局

    移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...

  3. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...

  4. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  5. 基于淘宝弹性布局方案lib-flexible的问题研究

    上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...

  6. cocostudio做出来的界面如何进行分辨率适配，兼论cocos2dx3的多分辨率适配机制，以及retina适配机制

    cocos有很多代码实际上都不再使用了,看代码时反而误导了程序员. 比如一个简单的分辨率适配,我查到了setContentSize,然后调用setContentSize,毫无用处啊!于是乎,我到处查资 ...

  7. REM 布局

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

  8. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  9. [转]走向视网膜（Retina）的Web时代

    转载出处:http://www.w3cplus.com/css/towards-retina-web.html 维基百科将Retina译为“视网膜”."Retina"一词,原意是“ ...

随机推荐

  1. MapInfo 文件解析

    在MapInfo 中所指的表是单纯的数据表或是图形与数据的结合.一个典型的MapInfo表将主要由*.tab.*.dat.*.wks.*.dbf. *.xls.*.map.*.id.*.ind文件格式 ...

  2. INavigationAware接口示例

    INavigationAware接口 public interface INavigationAware {     bool IsNavigationTarget(NavigationContext ...

  3. 网络分析：WireShark

    安装 WireShark 官网 过滤器 类别 显示过滤器模式 捕获过滤器模式 逻辑表达式 and:&& or:|| 成组:() 过滤实例 仅监听某域名 http.host == &qu ...

  4. RN 图片处理 resizeMode

    Image组件必须在样式中声明图片的宽和高.如果没有声明,则图片将不会被呈现在界面上.    我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高. 当Image的实际宽 ...

  5. 查看自身公网ip的命令

    curl ifconfig.me curl cip.cc curl ipinfo.io

  6. 不容错过的 Babel7 知识

    对 Babel 的配置项的作用不那么了解,是否会影响日常开发呢?老实说,大多情况下没有特别大的影响(毕竟有搜索引擎). 不过呢,还是想更进一步了解下,于是最近认真阅读了 Babel 的文档,外加不断编 ...

  7. B/S结构-登录页面-测试用例设计

    页面描述: 有一个登陆页面, 假如上面有2个textbox, 一个提交按钮 测试需求: 请针对这个页面设计30个以上的testcase 功能测试(Function test) 0. 什么都不输入,点击 ...

  8. 【HANA系列】【第七篇】SAP HANA XS使用Data Services查询CDS实体【一】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第七篇]SAP HANA XS ...

  9. 【Python基础】lpthw - Exercise 47 自动化测试

    一.自动化测试的目的 利用自动化的测试代码取代手动测试,使得程序中的一些初级bug可以被自动检出,而无需人工进行重复繁琐的测试工作. 二.编写测试用例 利用上一节编写的skeleton,这次在proj ...

  10. CentOS下Vim加密解密文本

    CentOS用vim/vi给文件加密和解密 一. 利用 vim/vi 加密: 优点:加密后,如果不知道密码,就看不到明文,包括root用户也看不了: 缺点:很明显让别人知道加密了,容易让别人把加密的文 ...