前言
人们可能通过形状和大小不同的设备来访问网页。
通过响应式网页设计，你可以设计出能灵活适应不同屏幕大小、方向和分辨率的网页
@media
可以根据不同的视口大小调整内容的布局。
视口是指浏览器中，用户可见的网页内容。 视口会随访问网站的设备不同而改变。
p { font-size: 20px; } @media (max-height: 800px) { p { font-size: 10px; } } 复制代码
Responsive Image
使图片自适应设备尺寸：
- 设置
max-width值为100%可确保图片不超出父容器的范围。- 设置
height属性为auto可以保持图片的原始宽高比。
<style> .responsive-img { max-width: 100%; height: auto; } img { width: 600px; } </style> <img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set"> <img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set"> 复制代码
Retina Image
针对高分辨率屏幕应使用视网膜图片：由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。
让图像正确出现在高分辨率显示器上的最简单方式， 是定义它们的
width和height值为原始值的一半。
<style> img { /* 原尺寸宽高为200px */ height: 100px; width: 100px; } </style> <img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'"> 复制代码
vw vh vmin vmax
视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
个不同的视窗单位分别是：
vw：10vw的意思是视窗宽度的 10%。vh：3vh的意思是视窗高度的 3%。vmin：70vmin的意思是视窗的高度和宽度中较小一个的 70%。vmax：100vmax的意思是视窗的高度和宽度中较大一个的 100%。
<style> h2 { width: 80vw; background-color: pink; } p { width: 75vmin; background-color: pink; } </style> <h2>Importantus Ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui. </p>
