文档章节

移动端1px的问题

Chason-洪
 Chason-洪
发布于 2017/04/26 16:01
字数 321
阅读 17
收藏 0
点赞 0
评论 0

http://www.jianshu.com/p/221bebfae266

因为有dpr的概念。有的设备1px 看起来很粗。

第一种方法

 

简写

            

第二种方法(拷贝于aui)

/*水平线*/
.aui-hr {
	width: 100%;
	position: relative;
	border-top: 1px solid #dddddd;
	height: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
	.aui-hr{
		border: none;
        background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: top;
        background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
        background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd 50%,transparent 50%);
	}
}

/*边框样式*/
.aui-border-l {
    border-left: 1px solid #e5e5e5;
}
.aui-border-r {
    border-right: 1px solid #e5e5e5;
}
.aui-border-t {
    border-top: 1px solid #e5e5e5;
}
.aui-border-b {
    border-bottom: 1px solid #e5e5e5;
}
.aui-border {
    border: 1px solid #e5e5e5;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
	.aui-border-l {
		border: none;
        background-image: -webkit-linear-gradient(0deg, #e5e5e5, #e5e5e5 50%, transparent 50%);
        background-image: linear-gradient(270deg, #e5e5e5, #e5e5e5 50%, transparent 50%);
        background-size: 1px 100%;
        background-repeat: no-repeat;
        background-position: left;
	}
	.aui-border-r {
		border: none;
        background-image: -webkit-linear-gradient(0deg, #e5e5e5, #e5e5e5 50%, transparent 50%);
        background-image: linear-gradient(270deg, #e5e5e5, #e5e5e5 50%, transparent 50%);
        background-size: 1px 100%;
        background-repeat: no-repeat;
        background-position: right;
	}
	.aui-border-t{
		border: none;
        background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: top;
        background-image: linear-gradient(0,#e5e5e5,#e5e5e5 50%,transparent 50%);
        background-image: -webkit-linear-gradient(90deg,#e5e5e5,#e5e5e5 50%,transparent 50%);
	}
	.aui-border-b {
		border: none;
        background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: bottom;
        background-image: linear-gradient(0,#e5e5e5,#e5e5e5 50%,transparent 50%);
        background-image: -webkit-linear-gradient(90deg,#e5e5e5,#e5e5e5 50%,transparent 50%);
	}
	.aui-border{
        border: none;
        background-image: -webkit-linear-gradient(270deg, #e5e5e5, #e5e5e5 50%, transparent 50%), -webkit-linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%), -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%), -webkit-linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
        background-image: linear-gradient(180deg, #e5e5e5, #e5e5e5 50%, transparent 50%), linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%), linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%), linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        background-repeat: no-repeat;
        background-position: top, right top, bottom, left top;
    }
}

注意一个元素不能同时使用多个.aui-border-x

© 著作权归作者所有

共有 人打赏支持
Chason-洪
粉丝 12
博文 155
码字总数 165549
作品 0
漳州
程序员
移动端轮播图不能充满外框,缺1px的问题

问题解析: 在浏览器dom渲染中,对于div等dom元素的渲染,会对非整数宽度的dom自动渲染为整数宽度,比如说100.5px的宽度,将被渲染为101px,小数点后数值进1;但是类似于img标签等内部标签,...

故林青衫 ⋅ 2017/12/28 ⋅ 0

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅。 移动端H5页面rem缩放方案flexible.js兼容375px方案的思路 参考: 移动端高清、多屏适配方案 viewport-and-flexible.js flexibl...

尚妆产品技术刊读 ⋅ 2017/03/02 ⋅ 0

移动端高清、多屏适配方案

移动端高清、多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为...

待续_ ⋅ 2015/08/12 ⋅ 0

浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联 ⋅ 2016/08/19 ⋅ 0

移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方 ⋅ 2017/12/26 ⋅ 0

手机端页面自适应解决方案—rem布局

rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 如何使用? 这是rem布局的核心代码,这段代码的大意是: 如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否...

拉普拉斯婷 ⋅ 2016/10/13 ⋅ 0

Html5添加Tabs样式单页多图轮播图插件教程

一、HTML结构 <div id="slideBox"> <div class="Jslide"> <!-- 轮播图 --> <div class="Jslideclip"> <ul class="Jslidelist"> <li class="Jslideitem"> <a href="javascript:"> <img src="......

大街小巷 ⋅ 2016/01/06 ⋅ 0

web前端响应式设计总结

一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到...

ouven ⋅ 2016/01/17 ⋅ 2

rem : web app适配的秘密武器

最近看到这样一个提问:我有一个750 x 1500尺寸的设计稿,设计稿上有一个150 x 50的按钮,那么在写页面布局的时候,应该如何确定按钮的尺寸呢?。大多数同学在回答的时候提到了rem。这让我对...

我的阿轲1打9 ⋅ 2017/11/29 ⋅ 0

gulp.spritesmith如何设置图片间距?

今天在移动端的项目中使用雪碧图发现个问题,由于雪碧图合并时图片上下左右间没有空出个1px或2px,而页面又是采用rem布局,计算有时会有1px的偏差,导致图片呈现时会出现1px上方图标的内容或...

陶中马 ⋅ 2015/10/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

UI ,前端框架选型

Flat-UI

miaojiangmin ⋅ 6分钟前 ⋅ 0

Istio Service Mesh 教程

Istio Service Mesh 教程 作者 宋净超 | 5400字 | 阅读大约需要11分钟 | 归档于istio | 发表于 2018-05-22 标签 #Istio #教程,来自 https://servicemesher.github.io/blog/istio-service-m...

openthings ⋅ 11分钟前 ⋅ 0

scala swing

scala swing组件的库 https://github.com/scala/scala-swing scala swing的API文档 https://www.scala-lang.org/api/2.9.1/scala/swing/package.html...

whoisliang ⋅ 15分钟前 ⋅ 0

CentOS安装配置Nginx

安装依赖 yum install gcc yum install pcre-devel yum install zlib zlib-devel yum install openssl openssl-devel //一键安装上面四个依赖 yum -y install gcc zlib zlib-devel pcre-deve......

临江仙卜算子 ⋅ 22分钟前 ⋅ 0

开源 java CMS - FreeCMS2.8 依申请公开

项目地址:http://www.freeteam.cn/ 依申请公开 1. 转交申请公开 用户可以把申请公开转交给其他人办理,系统会记录此申请公开的转交记录。 注意:同时只能转交一个申请公开。 选择需要转交的...

freeteam ⋅ 26分钟前 ⋅ 0

以太坊 web3.py 签名转账

以太坊 web3.py 签名转账 本文节选自电子书《Netkiller Blockchain 手札》 Netkiller Blockchain 手札 Mr. Neo Chan, 陈景峯(BG7NYT) 中国广东省深圳市龙华新区民治街道溪山美地 518131 +86...

netkiller- ⋅ 31分钟前 ⋅ 0

年薪40W的程序员必会的技术有哪些?

很多人在问我,程序员如何拿高薪,如何做到年薪40W+,其实总结出来还是一句话,你的技术决定你的能力已经薪资。 那么什么样的技术人才才能拿到一份Java行业里面的高薪呢? 下面是我的一个总结...

码代码的小司机 ⋅ 32分钟前 ⋅ 0

jesque-spring使用及源码分析

1.使用 jesque结合spring使用,步骤如下: 1.1 在项目中添加maven依赖 <dependency> <groupId>net.lariverosc</groupId> <artifactId>jesque-spring</artifactId> <version>1.0.0</ve......

Funcy1122 ⋅ 33分钟前 ⋅ 0

OSChina 周二乱弹 —— 加班的代码不要枉费了我的童子功

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《29》- 未完成乐队 《29》- 未完成乐队 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :#看球提醒# 02:00 巴西v...

小小编辑 ⋅ 59分钟前 ⋅ 16

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部