移动端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. C#入门篇5-7:流程控制语句 continue语句

    #region continue语句 public class ContinueApp { public static void Fun1() { //标签打印显示1…30,若能被3整除则不打印. ; ...

  2. python小脚本（18-11.10）-修改excle后批量生成，作用：导入数据时，系统做了不能导入重复数据时的限制时使用 -本来是小白，大神勿扰

    from testcase.test_mokuai.operation_excle import OperationExcleimport shutil class test_daoru(): #一个 ...

  3. pc和移动端获取滚动条的位置

    移动端获取滚动条:document.body.scrollTop pc端获取滚动条:document.documentElement.scrollTop

  4. 设计模式之责任链模式 chainOfResp

    后面我们将学习设计模式里面的行为型模式 代码实现 /** * 抽象类 * @author bzhx * 2017年3月14日 */ public abstract class Leader { pro ...

  5. kickstart配置文件详解和system-config-kickstart

    kickstart是什么         许多系统管理员宁愿使用自动化的安装方法来安装红帽企业 Linux.为了满足这种需要,红帽创建了kickstart安装方法.使用kickstart,系统管理员可 ...

  6. 【bzoj3091】城市旅行 LCT区间合并

    题目描述 输入 输出 样例输入 4 5 1 3 2 5 1 2 1 3 2 4 4 2 4 1 2 4 2 3 4 3 1 4 1 4 1 4 样例输出 16/3 6/1 题解 LCT区间合并 前三个 ...

  7. 座位安排（seat）

    座位安排(seat) 题目描述 费了一番口舌,wfj_2048终于成功地说服了n∗mn∗m个妹子来陪自己看电影. 为了这次声势浩大,wfj_2048包下了一座有n∗mn∗m个座位的电影院. (wfj_ ...

  8. Educational Codeforces Round 8 B 找规律

    B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  9. 【04】【转】Nodejs学习笔记（四）--- 与MySQL交互（felixge/node-mysql）

    目录 简介和安装 测试MySQL 认识一下Connection Options MYSQL CURD 插入 更新 查询 删除 Nodejs 调用带out参数的存储过程,并得到out参数返回值 结束数据 ...

  10. CodeVS 1503 愚蠢的宠物

    题目描述 Description 大家都知道,sheep有两只可爱的宠物(一只叫神牛,一只叫神菜).有一天,sheep带着两只宠物到狗狗家时,这两只可爱的宠物竟然迷路了…… 狗狗的家因为常常遭到猫猫的 ...