移动端1px 边框
伪类+ transform
.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border_1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border_1px:before{
transform: scaleY(0.33);
}
}
设备像素比device pixel ratio简称dpr,即物理像素和设备独立像素的比值。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
移动端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中的像 ...
- 移动端1px边框问题
用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...
- 解决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 ...
随机推荐
- [易学易懂系列|rustlang语言|零基础|快速入门|(23)|实战1:猜数字游戏]
[易学易懂系列|rustlang语言|零基础|快速入门|(23)|实战1:猜数字游戏] 项目实战 实战1:猜数字游戏 我们今天来来开始简单的项目实战. 第一个简单项目是猜数字游戏. 简单来说,系统给了 ...
- JSP+Servlet+DAO+Javabean模式小记-20171029
1.Servlet的doPost方法使用request.getParameter()接收网页传送的form表单数据时,必须使用name属性,而不能使用id. 2.这是最简单的MVC模式,其中M(mod ...
- BBS-登录注册
目录 1注册上传头像 2.登录图片验证码校验 1注册上传头像 创建admin管理员代码:python3 manage.py createsuperuser 1.在setting文件中配置,用户注册成功 ...
- 服务消费(LoadBalancerClient、Ribbon、Feign)
转自:https://www.jianshu.com/p/562045489d9d 4.1使用LoadBalancerClient 在Spring Cloud Commons中提供了大量的与服务治理相 ...
- Postman之 SSL证书配置随手记
参考文档: https://learning.getpostman.com/docs/postman/sending_api_requests/certificates/ 随着 https 的推动,更 ...
- 处理springboot OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
springboot项目中添加了字体等文件后,页面无法识别,浏览器调试窗口报错如下: Failed to decode downloaded font: http://localhost:8080/f ...
- 题解 【POJ1014】 Dividing
题目意思 有六种不同的石子,权值为\(1\)~\(6\),给出六种石子的数量,求能否将石子分成权值相等的两份. 解析 这题可以直接用多重背包写, 因为仔细想想, 能够平均分成两份, 也就是能将一部分石 ...
- Jmeter+ant+Jenkins接口自动化框架搭建
摘自:https://testerhome.com/topics/13389 一.背景 上一篇讲了Jmeter 接口自动化-脚本数据分离实例,我们知道怎么利用Jmeter去编写接口自动化脚本,但是接 ...
- psd缩略图上传组件
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- 斐波那契数列的通项公式x+洛谷P2626x
#include<cstdio> #include<iostream> #include<cmath> using namespace std; int main( ...