移动端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. 【Combination Sum II 】cpp

    题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...

  2. iOS笔记052- Quartz2D-绘图

      简介 Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作       绘制图形 : 线条\三角形\矩形\圆\弧等       绘制文字       绘 ...

  3. 深入学习之mysql（三）单表操作

    1.创建表的结构和数据 CREATE TABLE `t_student`( `id` INT PRIMARY KEY, `stuName` VARCHAR(10) NOT NULL, `age` IN ...

  4. [译]从列表或字典创建Pandas的DataFrame对象

    原文来源:http://pbpython.com/pandas-list-dict.html 介绍 每当我使用pandas进行分析时,我的第一个目标是使用众多可用选项中的一个将数据导入Pandas的D ...

  5. 【转】Apache Thrift - 可伸缩的跨语言服务开发框架

    Apache Thrift - 可伸缩的跨语言服务开发框架 Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架.本文将从 Java 开发人员角度详 ...

  6. VS2015 +.NETMVC5 +EF实践

    -- 当做笔记,以上图片按照顺序来的. 跟着 http://www.cnblogs.com/sanshi/ 一步步来的

  7. 一个 Java 的 Socket 服务器和客户端通信的例子

    一个 HelloWord 级别的 Java Socket 通信的例子.通讯过程: 先启动 Server 端,进入一个死循环以便一直监听某端口是否有连接请求.然后运行 Client 端,客户端发出连接请 ...

  8. 【距离GDOI：136天】 后缀数组中...

    当时后缀数组没有好好学...各种应用都没学,这两天好好补,要把罗神的论文好好研究一遍...其实后缀数组真的好神奇!!特别是那个萌萌的height数组! 今天终于能有两节完整的晚自修了QAQ...明晚还 ...

  9. POJ3678 Katu Puzzle 【2-sat】

    题目 Katu Puzzle is presented as a directed graph G(V, E) with each edge e(a, b) labeled by a boolean ...

  10. 刷题总结——飞飞侠(bzoj2143 最短路)

    题目: Description 飞飞国是一个传说中的国度,国家的居民叫做飞飞侠.飞飞国是一个N×M的矩形方阵,每个格子代表一个街区.然而飞飞国是没有交通工具的.飞飞侠完全靠地面的弹射装置来移动.每个街 ...