移动端设备中1px适配
方式1:伪类+transform实现,主要用transform中的scale缩放,缩放默认中心点是以x,y轴的50%处,因此需要用transform-origin调整中心点
html代码:
<div class="box">
<ul>
<li class="b-b">1</li>
<li class="borders">2</li>
</ul>
</div>
css代码:
*{padding:0;margin:0;list-style:none;}
.box ul{padding:0 15px;}
.box li{line-height:30px;margin-top:10px;}
.b-b,.borders{position:relative;}
.b-b:after,.borders:after{content:'';position:absolute;transform:scale(0.5);}
.b-b:after{bottom:0;left:0;height:1px;width:100%;background:red;transform-origin:left bottom;}
.borders:after{left:0;top:0;bottom:-100%;right:-100%;border:1px solid red;transform-origin:top left;}
效果图:

移动端设备中1px适配的更多相关文章
- css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...
- 7种方法解决移动端Retina屏幕1px边框问题
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- iOS 的 APP 在系统中如何适配不同的屏幕的尺寸
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
- 移动端项目中 @2x 图 和 @3x 图 的使用
移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片.通过@media (媒体查询),判断设备的dpr. @mixin ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- OC和Swift中的UITabBar和UINaviGationBar的适配 [UITabbar在IPad中的适配]
作者 sundays http://www.cnblogs.com/sundaysgarden/ OC中UITabbar的适配[iphoneX和Ipad适配] 自定可以UITabar 自定义UITab ...
随机推荐
- 钉钉授权第三方WEB网站扫码登录
一.阅读开发文档 首先阅读钉钉官方的开发文档,扫码登录其实用的是官方文档描述的第二种方式,即将钉钉登录二维码内嵌到自己页面中,用户使用钉钉扫码登录第三方网站,网站可以拿到钉钉的用户信息. 二.准备工作 ...
- 使用Python创建一个简易的Web Server
Python 2.x中自带了SimpleHTTPServer模块,到Python3.x中,该模块被合并到了http.server模块中.使用该模块,可以快速创建一个简易的Web服务器. 我们在C:\U ...
- MySQL 存储过程的变量
MySQL 存储过程的变量 变量是一个命名数据对象,变量的值可以在存储过程执行期间更改.我们通常使用存储过程中的变量来保存直接/间接结果. 这些变量是存储过程的本地变量. 注意:变量必须先声明后,才 ...
- LInux 些许知识
1.Linux下去掉^M的方法 ①dos2unix filename ②sed -i 's/^M//g' filename #注意:^M的输入方式是 Ctrl + v ,然后Ctrl + M 2.so ...
- java,桶排序,冒泡排序,快速排序
1.桶排序: 百度百科:桶排序 (Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶子里.每个桶子再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排 ...
- Confluence 6 从 WIKI 标记整合到基于 XHTML 的存储格式
如果你现在正在将 Confluence 从一个老的版本升级到 Confluence 4.0 或者更新的版本 (例如从 Confluence 3.5.x 或者更老的版本),在升级的过程中一个内容整合过程 ...
- Django框架简介-路由系统
2.2 路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是 ...
- OO的奇妙冒险2
OO的奇妙冒险 ~多线程入门与魔鬼的优化~ 目录 总体分析 作业内容分析 作业内容总结 互测的收获 公测互测bug分析与总结 优化分析 不太正经的个人自嗨 总体分析 公测 中测(基础与进阶): 这一单 ...
- Spvmn测试环境搭建及其安全性讨论
一.说明 这几天都在做设备的协议分析,然后看到有个叫Spvmn的不懂要怎么操作才能触发其操作过程,问了测试部的同事说也没有测试文档,自己研究了一下这里做个记录. 按我现在理解,各厂商有自己的私有协议. ...
- 华为S5700配置端口镜像和华三S5120配置802.1X认证记录
一.说明 事情的起因是我们部门有个华为的S5700交换机,想配置端口镜像抓包但让助理买的串口线很久都还没到:而昨天测试部的同事说他们那有台华三的S5120想要配802.1X认证,但只有华为交换机的文档 ...