不同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. Ubuntu14.04升级cmake版本的方法

    在Ubuntu14.04用以下命令默认安装的cmake版本为2.8.x,有时我们需要更高版本的cmake,所以需要升级. $ sudo apt-get install cmake 可通过以下命令查询c ...

  2. ILSpy C# language support status

    C# language support status Asynchronous methods 已经支持 Generalized async return types  还不支持 Async main ...

  3. leetcode131分割回文串

    class Solution { public: vector<vector<string>> ans; bool isok(string s){ ; ; while(i< ...

  4. druid连接池各属性说明

    转: druid连接池各属性说明 2018年10月17日 04:56:57 ht_kasi 阅读数:374   版权声明: https://blog.csdn.net/ht_kasi/article/ ...

  5. springboot集成springcloud，启动时报错java.lang.AbstractMethodError: null

    出现这个问题是springboot和springcloud的版本不匹配. 我此处使用了springboot 2.0.4.RELEASE,springcloud 使用了Finchley.SR2. 修改方 ...

  6. k8s 删除ns 卡住的解决办法

    在某些情况下,在k8s中会无法删除某个namespace,它会一直卡在terminating状态下.解决这个问题的步骤为: kubectl api-resources --verbs=list --n ...

  7. Qt qss问题总结

    1.在QWidget中设定了setObjectName,就是不起作用. 解决方法重写paintEvent. #ifndef BROWSEWIDGET_H #define BROWSEWIDGET_H ...

  8. LinuxC/C++基础——引用

    1.引用(Reference) 1.1引用的基本语法 引用是C++对C的重要扩充,也存在与其他一些编程语言中,并不是C++的发明.通过引用,C++增加了 另外一种给函数传递地址的途径,这就是按引用传递 ...

  9. 基于vs插件的abp代码生成器

    工作了这么多年,一直都在小公司摸爬滚打,对于小公司而言,开发人员少,代码风格五花八门.要想用更少的人,更快的速度,开发更规范的代码,那自然离不开代码生成器.之前用过动软的,也用过T4,后面又接触了力软 ...

  10. 在C语言中函数及其调用过程

    目录 函数 C语言中的变参函数 函数的本质是什么 内存区域的区分技巧 函数的调用过程 栈帧的概念 调用过程细节 按照约定传参 函数 如果一个函数有声明没实现,那么就会出现链接错误: 以上代码会出现链接 ...