不同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. vmvare ubuntu虚拟机固定ip设置

    1.vmvare网络设置 2.window网络设置 3.ubuntu网络设置 先ifconfig 查看ip 已经设置为192.168.122.128 sudo vim /etc/network/int ...

  2. koa 基础（十九）es6中的单例

    1.app.js /** * es6中的单例 * 实例化的时候,无论实例多少次,构造函数只执行一次,有利于提高性能 */ class Db { static getInstance() { /*单例* ...

  3. 前端开发中的Error以及异常捕获

    本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...

  4. struts2数据处理的几种方式

    package com.loaderman.c_data; import java.util.Map; import javax.servlet.ServletContext; import com. ...

  5. [idea]创建一个控制台程序

    新建项目时,选择JBoss即可.

  6. 六十一：Flask.Session之flask操作session

    1.设置session:使用flask.session就可以操作字典,操作方式和操作字典一样:session['key']=value2.获取session,和获取字典的值一样:session['ke ...

  7. c# Selenium ExpectedConditions 不存在

    Selenium中的显示等待指的是,等待某一元素出现或者等待页面加载完成后,才执行下一步.需要用到WebDriverWait类. 例如: , , )); var element = wait.Unti ...

  8. ubuntu源与常用python配置pip源(win)、pip常用命令

    pip常用命令 ubuntu更新系统源 首先备份/etc/apt/sources.list mv /etc/apt/sources.list /etc/apt/sources.list.bak 然后下 ...

  9. SAS数据挖掘实战篇【一】

    SAS数据挖掘实战篇[一] 1数据挖掘简介 1.1数据挖掘的产生 需求是一切技术之母,管理和计算机技术的发展,促使数据挖掘技术的诞生.随着世界信息技术的迅猛发展,信息量也呈几何指数增长,如何从巨量.复 ...

  10. linux网络管理命令"ip"用法

    Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.  ip help命令: 显示ip相关命令的帮助: # i ...