移动端下网页border:1px显示
解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewport的深入理解>>
步入正题直接上代码解决border:1px的解决办法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>像素为1px</title>
<style type="text/css">
.border{ position: relative; margin-bottom: 20px;}
.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color: #ccc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);} .border2{background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; }
</style>
</head>
<body>
<div class="border">像素为1px解决方法一</div> <div class="border2">像素为1px解决方法二</div>
</body>
</html>
2种方案都是CSS3来解决的.第一种是通过元素进行缩放;第二种是线性渐变的方法,此方法只能在手机上才能看到效果.
移动端下网页border:1px显示的更多相关文章
- 移动端Retina屏boder 1px显示为2px或3px的解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 1.何为“设备像素比dev ...
- [控件]unigui移动端下Unidatepicker时间显示解决方案
[控件]unigui移动端下Unidatepicker时间显示解决方案 http://tz10000.com/kong-jian-unigui-yi-dong-duan-xia-unidatepick ...
- 【Hadoop故障处理】全分布下,DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空
[故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts 的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...
- Firefox下网页缩放时防止div被挤到下一层
http://wu110cheng.blog.163.com/blog/static/13334965420121120102439190/ Firefox下网页缩放时防止div被挤到下一层 问题:三 ...
- 借助FreeHttp为任意移动端web网页添加vConsole调试
以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法 vConsole介绍 vConsole是一个轻量.可拓展.针 ...
- day112:MoFang:种植园使用websocket代替http&服务端基于flask-socketio提供服务&服务端响应信息&种植园页面显示初始化
目录 1.种植园使用websocket代替http 2.服务端基于socket提供服务 3.服务端响应信息 4.种植园页面展示 1.种植园使用websocket代替http 我们需要完成的种植园,是一 ...
- (转载)调用ob_end_flush()网页仍旧不能显示有关问题
(转载)http://www.myexception.cn/php/558638.html 调用ob_end_flush()网页仍旧不能显示问题?写了一个简单的demo,理论上调用ob_end_flu ...
- webapp 1px显示两倍的问题
公司最近换新首页,按照设计师的要求<大家都在逛>的分割线要1个像素. .span-3{ width:33.3333%; &:not(:first-child){ &:bef ...
随机推荐
- SqlServer2008(R2) 数据库使用外网IP实例连接服务器
1.打开sql2008,使用windows身份登录 2.登录后,右键选择"属性".左侧选择"安全性",选中右侧的"SQL Server 和 Windo ...
- BZOJ 3307: 雨天的尾巴( LCA + 线段树合并 )
路径(x, y) +z : u处+z, v处+z, lca(u,v)处-z, fa(lca)处-z, 然后dfs一遍, 用线段树合并. O(M log M + M log N). 复杂度看起来不高, ...
- 泛型编程中的Concept, Model和Policy
A crude explanation Concept A set of requirements on a type, e.g. a RandomAccessible concept require ...
- Inno Setup教程
一.简介 Inno Setup是一款免费的安装制作软件,小巧.简便.精美是其最大特点,支持pascal脚本,能快速制作出标准Windows2000风格的安装界面,足以完成一般安装任务.该软件用Delp ...
- 关于Git和Github
英文原文:Ten Things You Didn't Know Git And GitHub Could Do Git 和 GitHub 都是非常强大的工具.即使你已经使用他们很长时间,你也很有可能不 ...
- Android 启动APP黑屏解决方案
#Android 启动APP黑屏解决方案# 1.自定义Theme //1.设置背景图Theme <style name="Theme.AppStartLoad" parent ...
- 如何使用for循环连续的实例化多个对象!
Test类import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test ...
- Mybatis基础入门 I
作为ORM的重要框架,MyBatis是iBatis的升级版.Mybatis完全将SQL语句交给编程人员掌控,这点和Hibernate的设计理念不同(至于Hibernate的理念,待我先学习学习). 下 ...
- 读懂系统负载(Load Avg)的含义 | Devops
有过运维Linux服务器的选手,想必对于系统平均负载(load averages)参数不会陌生吧,我们可以通过top, htop, uptime这些命令找到它们(如下图),那么我们又改如何理解它们呢, ...
- MySQL的用户密码过期功能详解
MySQL的用户密码过期功能详解 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 先说明两个术语. Payment Ca ...