1px的border

移动端1px的border

移动端浏览器解决1px的底部border问题 1.使用border:1px solid #e0e0e0. 在不同设备下由于devicePixelRatio不同导致1px实际显示的长度不同.所以在移动端会显示出3px或者2px.所以不能用. 2.使用border-image.这种方法也很好,使用一个1px*1px的图片进行repeat,但是某些app内的webview版本很老,不支持这种css3属性. 3.使用:after伪元素,进行设置border-top,border的宽度设为需要的4倍然后t…

css中是这样写的: div{ border-bottom: 1px solid #dfe5e4; } 但在手机上,像素比不为 1 ,由于 webview 的灰度渲染, border 一般会显示为 2-3px 如何使手机上的 border 也显示为 1px ? 尝试了 div{ background: url(xxx.png) 0 bottom repeat-x; background-size: auto 10px; }其中xxx.png为一张 1x20 的图片,仅有最下面的 1x1 为有色,…

一像素边框的问题（使不同dpr设备完美显示1px的border）

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

border-1px的实现（stylus）如何在移动端设置1px的border

在这里我只介绍下边框的实现: 当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx,2Npx.为保设计稿还原度,解决就是用media + scale. 实现原理:伪类+缩放工具:stylus预编译器 1.在 stylus文件夹中创建mixin.styl文件,内容如下:(即通过伪类+子绝父相实现1px的下边框,这只是开始,并没有结束 ) border-1px($color) position: relative &:after display:…

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"…

使用min-device-pixel-ratio媒体功能实现真正的1像素border

关于设备像素比的知识,想必做过移动端开发的都有接触,这里就不介绍啦,万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍由于设备像素比存在的原因,我们在处理设计图的一些边框时,对于1px的border,如果在代码里将其写死,可能在不同设备像素比的设备中,粗细不一样,尤其是在目前大多数设备像素比为2的设备中,过粗. 那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定,实现货真价实的1px border. styl代码如下: mixin.…

【移动端debug-5】可恶的1px万能实现方案

最近和设计同学调ui,遇到的是一位对1px有极致追求的同学,像素眼一眼看出我写的是不是1px,所以让我好好地研究了一番1px到底怎么写最方便. 一.为什么出不来1px? 简而言之:css的1px只是一个抽象的单位,并非实际设备中的1px. 关于retina屏: 我们知道现在iphone大多数型号都用上了retina屏,而retina屏的分辨率相较于普通屏幕增加了一倍,也就是说原来1个像素宽度的区域内可以塞进2个像素了.我们css写的1px是一个概念像素,在retina屏的实际设备上占了2px的位…

css重修之书（一）：如何用css制作比1px更细的边框

如何用css制作比1px更细的边框在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方法可以添加比1px更细的边框呢?这里我们可以用:before或者:after来解决: 1:设置横向的边框: .my_content{ position:relative;} .my_content:before{ position: absolute; right: 0; top: 0; left:…

奇葩的狐火浏览器border属性

今天接到一个bug任务,客户反映火狐浏览器访问时某个商品楼层不显示商品.我立即打开我的火狐浏览器发现没有复现这个bug,后来经过一番折腾,才发现火狐浏览器缩放到90%时,商品楼层果然就消失了,而且每台电脑都会复现,看来这就是css代码问题了而不是接口数据问题,接下来我们就来分析这段历史悠久的css代码这是火狐浏览器没有缩放下的显示效果,没有问题, 我们来看下代码每行显示5个商品,每个商品的宽度是193+1=194px(其中1px是border边框的宽度),这样一来,一行的宽度就是194X5=…

AspNetPager分页控件样式的使用

分页是Web应用程序中最常用到的功能之一,AspNetPager 简单实用,应用到项目后台中,棒极了! 自定义样式: <style type="text/css"> /*拍拍网风格*/ .paginator { font: 11px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;} .paginator a {padding: 1px 6px; border: solid 1px #d…

CodingLife主题更新

收到反馈说CodingLife主题某些地方显示有问题,于是进行了更新,并且已提交.官方那边正在进行测试,我自己这边测完应该是没问题的,但不知道官方啥时候会进行更新,所以把CSS代码贴出来,有需要的可以加到“页面定制CSS代码”中,底层皮肤推荐选择Custom,因为是基于Custom定制的. * { margin:; padding:; } html { height: 100%; } body { color: #000; font-family: Verdana, Arial, Helveti…

salesforce 零基础学习（六十）Wizard样式创建数据

项目中表之间关联关系特别多,比如三个表中A,B,C C作为主表,A,B作为从表,有时候C表需要创建数据时,同时需要创建A,B两个表的数据,这种情况下,使用Wizard样式会更加友好. 以Goods__c表和Goods_Vendor__c表为例,Goods__c为主表,Goods_Vendor__c为从表.新建Goods__c记录以后同时要创建其相关的数据. 表结构关系如下: 代码: 1.GoodsHelper:封装获取goods的列表方法 public without sharing clas…

前端进阶试题（css部分）

一.css 40分 1. 什么是盒模型? 答: 2. Doctype的几种类型? 答:①.过渡的:②.严格的:③.框架的更多详细介绍参考:资料 3. 如何布局左不动右边自适应的两列布局? 答:两种简单的方法:position:absolute;和float: left; 两种效果是一样的,代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh…

一个简单移动页面ionic打包成app

先贴JS代码好了,缓动和调整透明度的功能,最后用ionic打包成应用就可以 window.onload=function(){ search(); move(); calc();}function search(){ var search = document.querySelector(".hw_header_box"); var banner = document.querySelector(".img_content"); var height = banne…

centos 6.4 getmail 收取163 邮件

#CentOS 6.6 64bit 默认yum 源没有getmail rpm包#首先安装EPEL yum 源EPEL(Extra Packages for Enterprise Linux):http://fedoraproject.org/wiki/EPEL[root@localhost ~]# rpm -Uvh http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el7.rf.x86_64.rpm #安装ge…

移动端H5页面高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

css写出0.5px边框（一）

在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框1. html部分 <div class="border">测试0.5px边框</div>css部分.border{ position: relative; color: #555; font-size: 14px; line-height: 41px;…

AspNetPager分页控件的使用

下面所记得东西仅仅是使用方法,详细知识点请看链接:http://www.webdiyer.com/Controls/AspNetPager/Downloads 首先:从网站上下载并安装控件下载地址: http://www.nuget.org/packages/AspNetPager_CN/(若无法打开,直接在Nuget中输入以下命令进行安装) PM> Install-Package AspNetPager_CN 将控件拖进web窗体中,设置如下格式 <webdiyer:AspNetP…

JS应用,表单上的一些东西

例: <body> <form>我的生日是哪一年? <input type="text" value="" id="t1" name="t1" /> <input type="submit" onclick="checkName()" id="t2" name="t2" value="检查答案&q…

Outlook HTML渲染引擎

OutLook始终不离不弃是不是很讨厌为Email代码兼容Outlook? 太遗憾了!虽然光都有尽头,但Outlook始终存在. 为了应付Email的怪癖,我们花了很多时间测试,确保我们搞定了所有Outlook的坑洼沟洄.在这个指导中,我们会分享一下数年来我们应付这种烦人的邮件客户端的编程经验,主要包括四个部分 Outlook必知的17个tricks 移除table间距的3种办法移除Outlook2013图片间距 Outlook 2007.2010中的CSS padding Outlook必…

清除inline-block元素之间的空白

一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和padding等:对兄弟元素则表现为行内框,具体表现为相邻行内块可在同一行显示,而且有着行内元素的特点,就是框与框之间可以出现空白,造成空白的方式可以使“空白符,制表符,换行符”. 可以通过简单的方式消除行内块之间的空白,就是在行内块的包含块上设置属性: .wrapper{font-size: 0;*…

多说使用ua-parser-js显示浏览器和系统信息

前言昨天博客接入了评论系统,使用的是国内的多说. 之前看到过有些利用该评论系统的有浏览器和系统信息的显示,感觉很不错. 所以,也想有这样的效果. 问题多说如何显示浏览器和系统的信息? 解决方法经过查找,利用UAParser.js可以实现. 步骤 1. 添加样式 span.this_ua {background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;b…

你所不了解的float（滥用float的怪异现象）

float设计初衷就是为了实现文字环绕效果原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三个表现:收缩.坚挺.隔绝. float破坏性主要表现在使父容器塌陷(浮动使得父容器塌陷是标准而非bug,否则如果不让父窗口塌陷怎么实现文字环境效果) 浮动的破坏性只是单纯的为了实现文字环绕效果 BFC(block format context)块级格式化上下文如何解决浮动造成的父容器塌陷? 也就是…

Qt StyleSheet皮肤css源码

使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/image/%1.css").arg(styleName)); file.open(QFile::ReadOnly); QString qss = QLatin1String(file.readAll()); qApp->setStyleSheet(qss); qApp->setPalette(…

基于淘宝弹性布局方案lib-flexible的问题研究

上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewport的initial-scale,导致viewport的width不等于device width,使得那些根据width编写的media query不一定与预期的一致,还有移动web经典的retina屏图片问题和1px边框问题在lib-flexible下也会与通常的做法有所差异,本文的内容就是研究这些东西,…

dragdrop 修改版

<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jqxDragDrop, jQuery Draggable, jQWidgets, Events Demo" /> <meta name="description" content="You can restrict dra…

margin负值的几种妙用

1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 100px; height: 100px; } 2: margin-top: -1px解决border多一像素的问题 3,圣杯布局(两边固定,中间自适应)…

jquery之实例应用

Query是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀. http://www.php100.com/manual/jquery/ 选择器与筛选器系列模态框 a{ text-decoration: none; color: #428bca; } .modal-backdrop{ position: fixed; top:0; right:0; b…

关于reset.css的疑问：为什么一定要重置浏览器样式？

自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置.刚开始做前端的时候一度感觉,能写出来这么一个样式表似乎很酷.很牛:做时间久了,也自己开始针对不同项目写自己的reset.css了,但也不外乎是一大堆重置样式,有时候都不关心浏览器里每个元素有什么样的默认样式,只是唯恐漏掉哪个元素没有把样式重置掉…

css margin

css中margin边界叠加问题: 看个同方向和异方向margin重叠现象: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head…

【1px的border】的更多相关文章