移动端1px细线解决方案--利用transform缩放方式
移动端1px会显示为2px;
解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放
1. 上边框 相当于 border-top
<div class="bordert1px"></div>
css
/*top*/
.bordert1px {
position: relative;
}
.bordert1px:before {
content: " ";
position: absolute;
left:;
top:;
width: 100%;
height: 1px;
background-color: #d8d8d8;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5); // 纵向缩放
}
细线--直接缩放就好了
<hr />
css
hr{background: #d8d8d8;width:1px;height:1rem;border:none;transform: scaleX(0.5);margin:;}
如果使用vux的话,vux也提供了1px解决方案 https://doc.vux.li/zh-CN/css/1px.html
移动端1px细线解决方案--利用transform缩放方式的更多相关文章
- 移动端1px细线解决方案总结
现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...
- 移动端1px细线的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端1px边框解决方案
在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...
- 移动端1px细线问题
1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; ...
- 移动端高清适配方案(解决图片模糊问题、1px细线问题)
本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...
- 移动 web 1px 边框解决方案
在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配,在IOS设备上 flexible.js 会根据设备的分辨率动 ...
- 移动端1px
移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...
- 移动端1px边框实现
问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...
- 移动端web常见问题解决方案
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...
随机推荐
- express 设置header解决跨域问题
//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...
- Spring mvc注解方式使用事务回滚
项目名:1ma1ma jdbc.xml <bean id="dataSource" class="org.apache.commons.dbcp.BasicDat ...
- hdoj4864 Task (贪心)
题目来源: 2014 Multi-University Training Contest 1--by FZU 题意:有N个机器和m个工作.机器和工作都有一个时间xi和价值yi,一个工作仅仅有满足xi和 ...
- ctags简明用法
1.安装: sudo apt install ctags 2.生成tags文件: //进入目标目录 ctags -R . 3.在vim中设置tags的绝对目录,这样就可以在任何子目录使用了. :set ...
- centos5.5 快速安装mysql
安装MySQL. [root@sample ~]# yum -y install mysql-server ← 安装MySQL[root@sample ~]# yum -y install php-m ...
- 什么是:before和:after?
前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:bef ...
- 从零开始,跟我一起做jblog项目(二)Maven
从零开始,跟我一起做jblog项目(一)引言 从零开始,跟我一起做jblog项目(二)Maven maven是一个项目管理工具,尤其适用于JAVA世界 在jblog的开发前期,还没有系统使用过mave ...
- linux 无外网情况下安装 mysql
由于工作需要,需要在一台装有 CentOS 系统的测试服务器上安装 MySQL ,由于该服务器上存有其他比较重要的测试数据,所以不能连接外网.由于之前安装 MySQL 一直都是使用 yum 命令一键搞 ...
- H2 Database 支持数据类型
整数(INT) -2147483648 到 2147483647 java.lang.Integer 布尔型(BOOLEAN) TRUE 和 FALSE java.lang.Boolean 微整数(T ...
- C++ new delete操作符
//new delete操作符 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; /* 1.n ...