自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 图1 图2 实现1PX边框的方法有很多,各有优缺点,比如通过背景图片实现.通过transform: scale(0.5)实现.本次实现的是通过VIEWPORT+rem实现的,优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难.圆角阴影失效问题.缺点嘛,这方法适全新

前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-top:上边框 border-right:右边框 border-bottom:下边框 border-left:左边框 **使用:<div class="border-top"></div>** border.css[注意] 使用时注意:该class名字只作用于(dis

新建一个border.css的文件,然后将代码复制粘贴,然后引用border.css样式文件,然后给需要添加边框的元素,加相应的类样式. tips: border-bottom[一像素下边框]:border-topbottom[上下分别添加一像素边框]   @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-righ

首先 我是借用了yo框架的border和他的媒体查询组合 这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) yo>lib>core>variables.scss(用来获取媒体查询的规则) 然后根据stylus语法修改拿到的border,修改完之后就可以愉快的使用了 border($border-width = 1px, $border-color = #ccc, $border-style = s

实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边>,缺点是,你需要制作图片,圆角的时候会出现模糊. .border-image-1px { border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAE

有时候在移动端显示1像素的边框时 可能因为dpi 的原因造成像素有变差 所以为了达到显示的像素达到预期效果就要编写一个css 通用类达到1像素边框的效果 关于dpi 的解释请看张鑫旭老师的文章:http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 下面是代码部分 .border-1px{ position: relative; } .border-1px::after{ content: " "; di

我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每个像素可以根据操作系统设置自己的颜色和亮度.设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如CSS像素),然后由相关系统转换为物理像素.根据物理像素和设备独立像素也衍生出了设备像素比(device pixel ratio)的概念,简称为

一.思路 普通的1px黑色实线边框: border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px(没测试过,可能会被解析成1或者0),border-width的值只能是自然数 类似的,outline, box-shadow等等也没有办法画出0.5px的细线 常规思路是不可行的,我们可以用伪元素 + 缩放巧妙地实现,具体步骤如下: 设置目标元素作为定位参照 .thinner-border { position: relative; /* 只要不是默认值stati

//文件名为mixin.scss// 2,3倍图适配 @mixin bg-image($url){ background-image: url("~imgs/icon/" + $url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image: url("~imgs/icon/" + $url + &

MySQL程序端启动密码错误解决方法 一般启动MySQL程序端,都是用mysql -uroot -p命令,当然前提是你的环境变量已经配好了. 为了连接服务器,当调用mysql时,通常需要提供一个MySQL用户名并且很可能需要一个 密码.如果服务器运行在登录服务器之外的其它机器上,还需要指定主机名.联系管理员以找出进行连接所使用的参数 (即,连接的主机.用户名和使用的密码).知道正确的参数后,可以按照以下方式进行连接: 在系统上,当你在选项文件或命令行上指定时,你可能会发现密码能够工作,但是当你在

ajax访问服务端restful api时,由于contentType类型的原因,浏览器会先发送OPTIONS请求. 本人服务端用的是spring mvc框架,web服务器用的是tomcat的,以下给出tomcat下OPTIONS请求服务端返回403forbidden的解决方法: 修改tomcat的conf目录下的web.xml文件,增加以下配置: <filter> <filter-name>CorsFilter</filter-name> <filter-cla

var _ = require('lodash'); var request = require("request"); /* @LM 2017-02-16 node端代理浏览器路由 解决浏览器跨域问题 demo: router.post('/proxy_http',proxy_routes); condition = { url:'',//接口地址 (必填) method:''//接口方式 (看接口需求) host:'',// form:{} post请求参数 } */ export

在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较.那么是什么导致这种原因的呢? 一.1px像素产生原因 首先,我们先对物理像素,设备独立像素,设备像素比等概念进行了解. 1.设备像素(device pixels) 设备中能控制显示的最小单位.能单独显示颜色的最小单位或点,称作像素点或像点. 屏幕尺寸及其屏幕分辨率 屏幕尺寸是以英寸为单位(1英寸=

引用了yo框架中的_border.scss(用来获取yo框架封装的border)   以及   variables.scss(用来获取媒体查询的规则) border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) // 为边框位置提供定位参考 position: relative; if $border-width == null $border-width: 0; border-rad

.borderOnePx{ position: relative; } .borderOnePx::after { content: ''; height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; } /* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.

最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定 如何解决这个问题才是重点,下面集中提出解决方案: 1.媒体查询利用设备像素比缩放,设置小数像素 css可以写成这样: .border{b

我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比devicePixelRatio”      设备上物理像素和设备独立像素(device-independent pixels (dips))的比例.      公式表示就是:window.devicePixelRatio = 物理像素 / dips   dip或dp,(device independen

问题:不同dpr的屏幕有不同的屋里像素值,而我们css像素的1px由于不同屏幕的渲染会导致宽度并不一样: 例如: dpr为2的retina屏幕是有四个物理像素点(真实屏幕上的点)组成一个逻辑(css)像素点.所以我们写css的1px的时候会表现出不同的宽度: 知识: 物理像素: 物理像素又被称为设备像素.设备物理像素,它是显示器(电脑.手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成.所谓的一倍屏.二倍屏(Retina).三倍屏,指的是设备以多少物理像素来显示一个CSS像素,也就是

在Get请求中,如果请求参数中带有中文,如 http://localhost:8080/DinnerParty/shop/search?query=多伦多, 在服务端拿到的是乱码. 这是因为客户端提交过去的是UTF-8编码的数据,而服务端解析URi时可能使用的是 iso8859-1编码. 修改tomcat配置文件server.xml <Connector port="8080" protocol="HTTP/1.1"               connect

当Lodop条形码设置的宽度比较短,数值比较多的时候,会出现条码的竖条和右端不对齐.个人测试了一下,发现解决办法有三种:1.增加条形码的宽度.2.隐藏条码本身的值,用text文本代替.3.修改条形码下方数值的大小.默认的数值文字大小是9,缩小后可以显示在条码下方,和右端对齐,就是文字会比较小,比较条码本身设置的比较小.测试代码: <head> <meta http-equiv="Content-Type" content="text/html; charse