总结10——响应式布局的方法1

第一步：在HTML中引入样式表，然后通过设置media对屏幕宽度进行设置，不懂media的可以去查看文档。

<link rel="stylesheet" href="style/common.css"> 公共的样式

<link media="(min-width:500px)" rel="stylesheet" href="style/desktop.css"> 大屏样式

<link media="(max-width:500px)" rel="stylesheet" href="style/mobile.css">手机样式

第二步：在样式表中写样式就行啦！

注意事项：

图片如何设置？

1.在大屏时为其设置100%；

2.在小屏时为其设置max-width:100%；

3.具体比例的根据实际情况而定，主要是不能把宽度设置为绝对宽度就行。