不同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. GitHub：Oracle

    ylbtech-GitHub:Oracle 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://github.com/oracle 2.   6 ...

  2. 外国前端收费模板wrapbootstrap

    https://wrapbootstrap.com/ 新闻模板 http://wrapbootstrap.com/preview/WB037B6R2

  3. hibernate之inverse=true相关配置讲解

      首先inverse=”true”是在双向关联里面使用单向关联没有这个配置 inverse – 标记由哪一方来维护关联关系(双向关联中会用到) inverse默认值为false 如果inverse设 ...

  4. appium+python+windows环境配置

    一.安装node.js 1:先找到对于电脑合适的node版本进行下载. 我的云盘node版本是7.8.0.地址如下:https://pan.baidu.com/s/19kcpXhCN1AuJAT9CB ...

  5. jdk1.8-LinkedList源码分析

    一:类的继承关系 我们看下类的继承关系 ) ) )) { ; i > index; i--) //当前记录结点等于上一节点 x = x.prev; //返回索引为index的点! return ...

  6. vscode 中sftp配置

    简单记录一下,相对路径的设置不用“/”表明根目录等,直接写目录名字即可 {     "name": "profile name",     "prot ...

  7. Unity中的动画系统和Timeline(1) 普通动画创建

    学习使用版本:Unity2017.1.1 目标:给一个Cube创建动画 一:第一种创建方法 1 Windows —— Animation,打开Aniamtion动画界面,此时显示 因为此时没有任何动画 ...

  8. Centos7永久关闭防火墙

    Centos7永久关闭防火墙 查看防火墙状态: systemctl status firewalld.service 绿的running表示防火墙开启 执行关闭命令: systemctl stop f ...

  9. 配置中心 Spring Cloud config

    配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion. 1.服务端 创建spring boot 项目 主要依赖 <dependenc ...

  10. 通过URLOS安装Redis缓存为wordpress网站提速

    快!快!快!我们都知道网站的加载速度直接影响用户体验.据研究发现,网站页面在3秒内加载完毕对用户而言是最佳的浏览体验.如果超过这个时间,用户跳出网站的几率会非常大.所以对于站长来说,提高速度是他们追求 ...