.border{
width: 100px;
height: 100px;
position: relative;
}
//加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是1px
@media screen and (-webkit-min-device-pixel-ratio:2) {
.border::after{
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #000;
box-sizing: border-box;
width: 100%;
height: 100%;
transform-origin: 0 0;
transform: scale(0.5);
}
}

css移动端适配 1px边框的解决方案的更多相关文章

  1. 移动端视网膜(Retina)屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  2. 移动端的1px边框问题

    最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用w ...

  3. 移动端适配1px问题

    (function(document) { var dcl = document.documentElement, wh; var scale = 1/window.devicePixelRatio; ...

  4. 移动端 CSS 1px 问题及解决方案

    移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 trans ...

  5. 解决CSS移动端1px边框问题

    移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...

  6. 移动端1px边框解决方案

    在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...

  7. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  8. 7种方法实现移动端Retina屏幕1px边框效果

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  9. 移动 web 1px 边框解决方案

    在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配,在IOS设备上 flexible.js 会根据设备的分辨率动 ...

随机推荐

  1. ESP8266 玩板记

    一.前言 esp8266的玩板记,后面应该会去更一些其他东西,这一块内容,这算是收官之战了. IoT,江湖有缘再相会 二.ESP8266实现WiFi杀手/钓鱼 这次的博客做的是一个娱乐性较强的项目. ...

  2. 洛谷 P3413 【萌数】

    敲完这篇题解,我就,我就,我就,嗯,好,就这样吧... 思路分析: 首先我们要知道一个回文串的性质--假如说一个[l-1,r+1]的串是回文的,那么[l,r]一定也是回文的. 所以我们只要记录前一个数 ...

  3. 2020年了,IT外企还香吗?

    本来是刚发了<世上有不用加班的程序员吗?>,有朋友问到IT外企不加班福利好什么的,就回复了几句. 老王观点: 现在IT外企已经不值得羡慕了,08.09年那会,ibm,惠普还是香饽饽,当时人 ...

  4. 用redis当作LRU缓存

    原文地址:https://redis.io/topics/lru-cache Redis可以用来作缓存,他可以很方便的淘汰(删除)旧数据添加新数据,类似memcached.LRU只是其中的一种置换算法 ...

  5. day09 Pyhton学习

    一.昨日内容回顾 文件操作 open(文件路径,mode="模式",encoding="编码") 文件路径: 1.绝对路径 从磁盘根目录寻找 2.相对路径 相对 ...

  6. main函数标准写法

    main函数签名 C++中允许两种格式,带参数的和不带参数的: int main() int main(int argc, const char* argv[]) 和C标准不同,C++中main函数必 ...

  7. 第四章 NFS服务相关介绍

    一.NFS服务介绍 1.什么是NFS?是一个共享存储,文件服务器 2.NFS基本概述NFS是Network File System的缩写及网络文件系统.NFS主要功能是通过局域网络让不同的主机系统之间 ...

  8. JavaScript 的用法

    内建的 JavaScript 对象可用于全局属性和函数​ 顶层函数(全局函数) 函数 描述 decodeURI() 解码某个编码的 URI. decodeURIComponent() 解码一个编码的 ...

  9. Bitmap 创建、转换、圆角、设置透明度

    指定一个色值生成bitmap  public Bitmap getBackGroundBitmap(int color) { Paint p = new Paint(); p.setColor(Col ...

  10. Ⅳ Monte Carlo Methods

    Dictum:  Nutrition books in the world. There is no book in life, there is no sunlight; wisdom withou ...