概念响应式设计，旨在实现在不同屏幕分辨率的终端上浏览网页的不同显示方式。响应式设计可以让网站在手机和平??板电脑上有更好的浏览和阅读体验。步骤1.设置元标记大多数移动浏览器将HTML页面缩放为宽视图（视口）以适合屏幕分辨率，您可以使用视图的元标记对其进行重置。下面的视图标签告诉浏览器使用设备的宽度作为视图宽度，以1:1的大小显示并禁用初始缩放。将此元标记添加到
标记内。
2。通过媒体查询设置样式MediaQueries媒体查询是响应式设计的核心，它可以与浏览器通信，告诉浏览器如何渲染页面。如果终端的分辨率小于980px，那么你可以这样写：//里面的样式会覆盖之前定义的样式@mediascreenand(max-width:980px){#head{…}#content{…}#footer{…}}3.设置多个视图宽度如果我们想兼容ipad和iphone视图，我们可以这样设置：/**ipad**/@mediaonlyscreenand(min-width:768px)and(max-width:1024px){}/**iphone**/@mediaonlyscreenand(width:320px)and(width:768px){}4.字体设置到目前为止，开发者使用的字体单位大多是像素。虽然像素在普通网站上是可以的，但是响应式字体我们还是需要的。响应式字体应该相对于其父容器的宽度，以便它适合客户端屏幕。CSS3引入了一个新的单位rem，它与em类似，但对于Html元素，rem使用起来更方便。rem是相对于根元素的，不要忘记重新设置根元素字体大小：html{font-size:100%;}完成后，您可以定义响应式字体：@media(min-width:640px){body{font-size:1rem;}}@media(min-width:960px){body{font-size:1.2rem;}}@media(min-width:1200px){body{font-size:1.5rem;}}5。注意宽度需要使用百分比#head{width:100%}#content{width:50%;}处理图像缩放的方法为图像指定的最大宽度是一个百分比。图片超出，则缩小；如果图片较小，则按原尺寸输出：img{width:auto;最大宽度：100%；}使用::before和::after伪元素+内容属性动态显示一些内容。在css3中，任何元素都可以使用content属性，这个方法是结合了css3的attr属性和HTML自定义属性的功能。//HTML结构//CSS控制：@media(min-device-width:600px){img[data-src-600px]{content:attr(data-src-600px,url);}}@media(min-device-width:800px){img[data-src-800px]{content:attr(data-src-800px,url);除了img标签图片，我们还经常遇到背景图片，比如logo作为背景图片：#loga{display:block;宽度：100%；高度：40px；文本缩进：55rem；背景图片：url（logo.png）；背景重复：不重复；background-size:100%100%;}//background-size是css3的新属性，用于设置背景图片的大小。有两个可选值。第一个值用于指定背景图像的宽度，第二个值用于指定背景图像的高度。如果只指定一个值，则另一个值默认为自动。//背景尺寸：封面；按比例扩展图像以填充元素//background-size:contain;按比例缩小图像以适应元素的大小其他属性，如pre、iframe、video等，需要控制以及img宽度。对于表格，建议不要增加padding属性，在低分辨率下使用内容居中：tableth,tabletd{padding:00;文本对齐：居中；}
