不同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. SpringSecurity——默认过滤器链

    介绍Spring Security默认的过滤器链,介绍顺序按照过滤器在过滤器链中的顺序排序 1.WebAsyncManagerIntegrationFilter 将Security上下文与Spring ...

  2. [学习笔记] MRF 入门

    MRF马尔科夫随机场入门 Intro MRF是一种广泛应用于图像分割的模型,当然我看到MRF的时候并不是因为分割,而是在图像生成领域,有的paper利用MRF模型来生成图像,因此入门一下MRF,并以分 ...

  3. 百度地图js判断点是否在圆形区域内

    /** * Created by LEGION on 2018/10/11. *//** * @fileoverview GeoUtils类提供若干几何算法,用来帮助用户判断点与矩形. * 圆形.多边 ...

  4. 自定义可拖动的Toast

    package com.loaderman.toastdemo; import android.content.Context; import android.graphics.PixelFormat ...

  5. Android studio 自动导入(全部)包 import （转）

    原文: https://blog.csdn.net/buaaroid/article/details/44979629 1.      Android studio 只有import单个包的快捷键:A ...

  6. JavaScript日常学习3

    JavaScript函数  函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname()     {执行代码} function myFunct ...

  7. 关于组播数据包“发不出去"，c#无法接收

    问题一:发不出去 最近做一个小东西改进方案需要用到组播,简单来说就是我先作为服务器端组播发送设备编号,然后组播成员作为客户端接收消息后先确认对方是不是在呼叫我.是的话就返回一个消息,这样我服务器端就可 ...

  8. SSM到Spring Boot入门与综合实战

    一:Spring从入门到进阶 1 Spring入门 1.1 Spring IOC的底层实现原理:工厂 + 反射 + 配置文件 <bean id="us" class=&quo ...

  9. 论文翻译：LP-3DCNN: Unveiling Local Phase in 3D Convolutional Neural Networks

    引言 传统的3D卷积神经网络(CNN)计算成本高,内存密集,容易过度拟合,最重要的是,需要改进其特征学习能力.为了解决这些问题,我们提出了整流局部相位体积(ReLPV)模块,它是标准3D卷积层的有效替 ...

  10. OpenGL_构建GLFW与第一个程序

    参考教程:https://learnopengl-cn.github.io/ 这个教程已经给出了很详细的资料,当然我这里是对细节的展示(在Windows上). 首先,你需要准备 VS2017 : ht ...