移动端1px边框问题
用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些。
解决办法:
主要是用到伪类及缩放。在需要画边框的元素上,设置一个伪类,它的伪类相对于这个元素是一个绝对定位,通过伪类画一个1px边框,然后把它定位到元素的下面,就变成一个下边框。
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
然后把应用这个class,去把这个伪类进行缩放,根据设备的最小dpr,比如1.5,就缩放0.75倍;dpr为2,就缩放0.5倍。
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7) @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
移动端1px边框问题的更多相关文章
- 移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
- 移动端1px边框伪类宽高计算
移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...
- 目前解决移动端1px边框最好的方法
在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...
- 移动端1px边框实现
问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...
- 解决CSS移动端1px边框问题
移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...
- 移动端1px边框解决方案
在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...
- 解决移动端1px边框问题的几种方法
1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中 ...
- 移动端1px 边框完整方案(四个方向)
使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l 左右方向 t ...
- 关于移动端1px边框问题
<div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:&l ...
随机推荐
- Java IO(文件操作工具类)
FileOperate实现的功能: 1. 返回文件夹中所有文件列表 2. 读取文本文件内容 3. 新建目录 4. 新建多级目录 5. 新建文件 6. 有编码方式的创建文件 7. 删除文件 8. 删除指 ...
- [C++] OOP - Base and Derived Classes
There is a base class at the root of the hierarchy, from which the other class inherit, directly or ...
- mysql分页的limit优化
1.很多新人都会很纳闷,为什么我建了索引使用分页还是这么卡.好,现在让我们一步一步去找原因吧. 首先limit本身跟索引没有直接关系. 先建一张商品sku表 create table goods_sk ...
- c# load xml 中文报错
<?xml version="1.0" encoding="GB2312"?>
- android AndroidManifest.xml uses-feature 详解
如果你是一个Android用户,而且你有一个老旧的安装有android 1.5 的android设备,你可 能会注意到一些高版本的应用没有在手机上的Android Market 中显示.这必定是应用使 ...
- Qt代码覆盖率code coverage(VS版)
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt代码覆盖率code coverage(VS版) 本文地址:http://techi ...
- 【week2】四人小组项目(WBS、NABCD)
项目选题:东北师范大学论坛 小组名称:nice! 项目组长:李权 组员:于淼 刘芳芳 杨柳 本周任务:要求给出需求概述.功能列表.痛点或亮点.NABCD及WBS模型在此项目中的应用. 作为东北师范大学 ...
- 基于gulp的前端自动化开发构建新
关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新, ...
- Directory类的使用、Alt+Shift+F10可以查看其命名空间
对于一个对象,按下Alt+Shift+F10可以查看其命名空间. Directory类的使用 using System; using System.Collections.Generic; using ...
- Visual Stdio 2015打包安装项目的方法(使用Visual Studio Installer)
首先在官网下载VS2015的Visual Studio Installer 1.创建安装项目 里面最左侧的框框有三个文件夹 1.“应用程序文件夹”即"Application Folder&q ...