移动端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. TCP的运输连接管理

    TCP的运输连接管理 TCP是面向连接的协议,有三个阶段:连接建立.数据传送 和 连接释放.运输连接的管理就是使运输连接的简历和释放都能正常地进行. 在TCP连接建立过程中要解决一下三个问题: 1.  ...

  2. loj2046 「CQOI2016」路由表

    大傻逼trie树,更傻逼的是我这都没独立想出来,以后要少看题解,多多思考 #include <algorithm> #include <iostream> #include & ...

  3. 一道题目关于Java类加载

    public class B { public static B t1 = new B(); public static B t2 = new B(); { System.out.println(&q ...

  4. Python+Selenium练习篇之11-浏览器上前进和后退操作

    本文来介绍上如何,利用webdriver中的方法来演示浏览器中地址栏旁边的前进和后退功能. 相关脚本代码如下: # coding=utf-8import timefrom selenium impor ...

  5. python - 接口自动化测试 - TestRegister - 注册接口测试用例

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: test_register.py @ide: PyChar ...

  6. startActivityForResult用法

    使用场景:A界面(activity) 可跳转到一个(假设为 B)或多个子Activity,要求B处理完工作之后返回A 界面,或许同时返回一些数据交给A继续处理.如 由登陆界面A跳转到注册界面B,注册成 ...

  7. maven学习（九）——maven中的坐标、依赖以及仓库

    一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...

  8. 【距离GDOI：141天】 滚入数位DP的坑

    作为博客园的第一篇...我都不知道要写什么了 ... 其实今天很没状态,就当吐槽吧... 嗯,被黄神带去写treap+可持久化线段树,然后在可持久化的删除上面跪了两天,真的是一跪不起.我已经连续多久没 ...

  9. pdf生成

    要用本文的方法生成PDF文件,需要两个控件:itextsharp.dll和ICSharpCode.SharpZipLib.dll,由于示例代码实在太多,我将代码全部整理出来,放在另外一个文件“示例代码 ...

  10. jQuery初级

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...