左右自适应两列布局：用到float属性 宽度按百分比设置。下图就是在手机中的样子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
html,body{width: 100%height: 100%}
#left{
width: 60%
height: 100%
float: left
background: red
}
#right{
height: 100%
width: 40%
float: right
background: wheat
}
p{
color: white
font-size: 2em
line-height:1.5
font-weight: 800
text-indent: 2em
}
</style>
</head>
<body>
<div id="left">
<p>在建筑科学和环境科学领域，采用了国际先进的IDiDe项目管理模式，构建国际技术联盟，为建筑设计师、空间设计师、产品元素设计师提供跨文化的对话平台</p>
</div>
<div id="right">
</div>
</body>
</html>
"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
扩展资料：自适应网页设计（Adaptive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例，里面是六个主人公的头像。
如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。
用JS调制屏幕大小。
1.CSS 方面：去掉所有元素的外间距、内边距，html 和 body 宽高设为 100%，canvas 元素 display 设为 block。
2.JS 方面：监听窗口的 resize 事件，在窗口大小改变的同时调整 canvas 的大小。
3.完整代码这里我们使用 jQuery 来处理窗口尺寸改变事件响应，以及属性设置。
4.同时使用 $(window).get(0).innerHeight 获取窗口高度，而不是 $(window).height()。是因为后者效果并不完美，无法返回所有浏览器窗口的完整高度值，这样浏览器窗口中 canvas 元素和滚动条的四周可能会仍存在白色区域。
5.代码公式：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-3.1.1.js"></script><style>* {margin: 0padding: 0}html, body {height: 100%width: 100%}canvas {display: blockbackground: #D6F8FF}</style><script type="text/javascript">$(function() {//添加窗口尺寸改变响应监听$(window).resize(resizeCanvas)//页面加载后先设置一下canvas大小resizeCanvas()})//canvasfunctionresizeCanvas{$("#myCanvas").attr("width"$(window).get(0).innerWidth)$("#myCanvas").atr("height", $(window).get(0).innerHeight)}</script></head<body<canvas id="myCanvas" width="400" height="200"></body>。
</html>
