移动端 :
rem 适配各种屏幕尺寸 同时基于<html> 的 font-size 属性 一般为100px
pc端:
运用媒体查询
<divclass="gridcontainer">
<divclass="gridwrapper">
<divclass="gridbox gridheader">
<divclass="header">
<h1>The Pulpit Rock</h1>
</div>
</div>
<divclass="gridbox gridmenu">
<divclass="menuitem">The Drive</div>
<divclass="menuitem">The Walk</div>
<divclass="menuitem">The Return</div>
<divclass="menuitem">The End</div>
</div>
<divclass="gridbox gridmain">
<divclass="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<imgsrc="pulpitrock.jpg"alt="Pulpit rock"width=""height="">
</div>
</div>
<divclass="gridbox gridright">
<divclass="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
</div>
</div>
<divclass="gridbox gridfooter">
<divclass="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
