移动端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集合中的细节问题

    1)集合不保存基本数据类型,而是会把基本数据类型装箱后保存. 2)Empty和null的区别:null是不存在,Empty已经初始化了,只不过里面是空的. 3)判断集合有效性: 先判断空,再判断emp ...

  2. 深入学习之mysql（五）连接查询

    深入学习Mysql(五)连接查询 1.准备数据库: CREATE DATABASE IF NOT EXISTS `db_book2` DEFAULT CHARACTER SET UTF8; USE ` ...

  3. 微信公众平台OAuth2.0网页授权

    微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友在使用这个的时候失败了或者无法理解其内容,希望我出个教程详细讲解一下,于是便有了这篇文章. 一. ...

  4. 关于caffe 是如何卷积的一点总结

    最近,在看caffe源码时,偶然在网上看到一个问题?觉得挺有意思,于是,仔细的查了相关资料,并将总结写在这里,供大家迷惑时,起到一点启示作用吧. 问题的题目是CNN中的一个卷积层输入64个通道的特征子 ...

  5. log4j配置信息

    #INFO的日志信息输出到stdout和R这两个目的地,stdout和R的定义在下面的代码,可以任意起名.等级可分为OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALLlog4j.r ...

  6. How to modify a compiled Android application (.apk file)

    Today I’d like to share with you my findings about how an existing .apk file can be modified. An .ap ...

  7. FreeBSD 用kgdb调试kernel dump文件

    FreeBSD 用kgdb调试kernel dump文件 来自: http://blog.csdn.net/ztz0223/article/details/8600052 kgdb貌似和ddb一样属于 ...

  8. UVALive 6609 Minimal Subarray Length（RMQ-ST+二分）

    题意:给定长度为N的数组,求一段连续的元素之和大于等于K,并且让这段元素的长度最小,输出最小长度即可,若不存在这样的元素集合,则输出-1 题目链接:UVAlive 6609 做法:做一个前缀和pref ...

  9. linux系统初始化——启动脚本是如何工作的

    启动脚本是如何工作的 Linux 使用的是基于 运行级(run-levels) 概念的称为 SysVinit 的专用启动工具.它在不同的系统上可能是完全不一样的,所以不能认为一个脚本在某个 Linux ...

  10. 浅谈C++三层架构

    浅谈C++三层架构 三层架构并不是MVC,MVC是一个很早就有的经典的程序设计模式,M-V-C分为三层,M(Model)-V(View)-C(Control). web开发中的三层架构是指:数据访问层 ...