移动端web开发越来越火，同时移动端适配也是一个很让人头疼的事情，你不能让一个同样大小的元素在不同的设备上都显示一样大小。（iphone6和iphone4下大小肯定是应该不一样的，否则用户体验很差）

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论—— 手淘的H5页面是如何实现多终端的适配 ？

那么趁此 Amfe阿里无线前端团队双11技术连载 之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。

研究了一下午flexible.js ，没想到被这个被这个border给搞的晕头转向的！

先看看最常见的移动端1px问题：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>

		<style type="text/css">

			* {

				padding: 0px;

				margin: 0px;

			}

			.js {

				width: 40px;

				height: 40px;

				margin: 0 auto;

			}

			.main0 {

				width: 200px;

				height: 200px;

				margin: 0 auto;

				border: 1px solid red;

				transform: scale(0.2);   /*200*0.2=40*/

				margin-top: -80px; /*(200-40)/2=80*/

				margin-left: -80px;

			}

			.my {

				width: 100px;

				height: 100px;

				border: 1px solid red;

			}

		</style>

	</head>

	<body>

		<div class="js">

			<div class="main0"></div>

		</div>

		<div class="my"></div>

	</body>

</html>

　　看到效果图，吓了我一跳：

这个100px像素的正方形怎么跑到哪里去了？

修改，给.js加上：border: 1px solid black; ,居然显示正常了！

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>

		<style type="text/css">

			* {

				padding: 0px;

				margin: 0px;

			}

			.js {

				width: 40px;

				height: 40px;

				margin: 0 auto;

				border: 1px solid black;  /*就是这一句，不知道为什么？？*/

			}

			.main0 {

				width: 200px;

				height: 200px;

				margin: 0 auto;

				border: 1px solid red;

				transform: scale(0.2);   /*200*0.2=40*/

				margin-top: -80px; /*(200-40)/2=80*/

				margin-left: -80px;

			}

			.my {

				width: 100px;

				height: 100px;

				border: 1px solid red;

			}

		</style>

	</head>

	<body>

		<div class="js">

			<div class="main0"></div>

		</div>

		<div class="my"></div>

	</body>

</html>

　

这又是什么情况？？  一句border: 1px solid black;  这么拽？

看来还是要 用::before，

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>

		<style type="text/css">

			* {

				padding: 0px;

				margin: 0px;

			}

			.js {

				width: 60px;

				height: 60px;

				margin: 0 auto;

				position: relative;

			}

			.js::before {

				content: '';

				width: 200px;

				height: 200px;

				margin: 0 auto;

				border: 1px solid red;

				transform: scale(0.3);

				position: absolute;

				top: -70px;

				left: -70px;

			}

			.my {

				width: 100px;

				height: 100px;

				border: 1px solid red;

				margin: 0 auto;

			}

		</style>

	</head>

	<body>

		<div class="js">

			<div class="main0"></div>

		</div>

		<div class="my"></div>

	</body>

</html>

　

谁能解释一下border到底是个什么鬼？？　跪谢！！！！！

这算是CSS的bug吗？的更多相关文章

  1. IE6的那些css常见bug（汇总）

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  2. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  3. CSS :nth-of-type() bug

    CSS :nth-of-type() bug .tools-hover-box-list-item { pointer-events: auto; box-sizing: border-box; di ...

  4. taro css 转换 bug

    taro css 转换 bug https://nervjs.github.io/taro/docs/size.html https://nervjs.github.io/taro/docs/comp ...

  5. IE常见的CSS的BUG（一）

    2011年6月,我毕业了.2012年我接触了CSS,本以为会好过些能赚点钱了,可谁知,Internet Explorer(下称IE),这个前端工程师的噩梦浏览器让我不再那么好过了.各种出现在IE身上的 ...

  6. 各种主流浏览器CSS、BUG兼容

    1.div的垂直居中问题 vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了.缺点是要控制内容不要换行.---- ...

  7. 浏览器中CSS的BUG

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...

  8. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  9. IE6对CSS支持Bug收集

    1.IE6双外边距 在IE6下,如果对元素设置了浮动,同时又设置了margin-left或者margin-right,margin值会加倍. 例如,设置margin-left:10px在IE6下会显示 ...

随机推荐

  1. java多线程的常用方法

    介绍一些多线程中的常用方法: //启动方法 a.start(); //返回代码正在被哪个线程调用的信息 a.currentThread(); //返回线程的名字 a.currentThread().g ...

  2. javascript 实现九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. RHCE认证经典考题

    1:按要求创建用户组及多个用户,设置用户的候选组,设置用户的默认shell. 创建组adminuser. 创建用户natasha和harry属于该组(该组为他们的第二个组). 创建用户sarah,不属 ...

  4. Python 操作 SQLite 数据库

    写在之前 SQLite 是一个小型的关系型数据库,它最大的特点在于不需要单独的服务.零配置.我们在之前讲过的两个数据库,不管是 MySQL 还是 MongoDB,都需要我们安装.安装之后,然后运行起来 ...

  5. hihoCoder #1661 数组区间

    题目大意 给出 $1$ 到 $n$ 的一个排列($n\le 10^5$),记做 $a_1, a_2, \dots, a_n$ .(注:原题面表述为:"给定 $n$ 个互不相同且不超过 $n$ ...

  6. 实例对比 Julia, R, Python，谁是狼语言？

    对于一个平台来说,使用者对技术本身是不敏感的,所以我们需要增加一些限制来减少集群的一些不可控情况,例如不断的写入新表/新数据却不记得删除,大量不按规范创建的表名等情况.与此同时应尽量让技术对用户透明, ...

  7. BZOJ3295 [Cqoi2011]动态逆序对 【CDQ分治】

    题目 对于序列A,它的逆序对数定义为满足i 输入格式 输入第一行包含两个整数n和m,即初始元素的个数和删除的元素个数.以下n行每行包含一个1到n之间的正整数,即初始排列.以下m行每行一个正整数,依次为 ...

  8. UVA 11991 vector

    Though Rujia Liu usually sets hard problems for contests (for example, regional contests likeXi’an 2 ...

  9. BZOJ2916 [Poi1997]Monochromatic Triangles 数论

    答案等于总三角形数-不合法数 一个不合法三角形一定存在两个顶点,在这个三角形中这个顶点的角的两边不同色 #include<cstring> #include<cmath> #i ...

  10. Linux服务器重启后nvidia-smi无法使用的解决方法

    服务器上的nvidia显卡驱动用的好好的,突然有一天,服务器断电了,然后恢复之后发现常用的nvidia-smi命令无法使用了,具体显示什么无法建立和驱动器的通信之类的,上网查了一堆,发现问题的核心:l ...