如何写点响应式布局的代码
如何写点响应式布局的代码，首先我懂得不是太多，就是跟着网上一点一点的去学去做，多去练练，相信孰能生巧，说不定几年后还能找到相对应的工作呢。
操作方法
- 01
首先，我们把里面的内容写出来。 <body> <div id="xiangyingshi"></div> </body>
- 02
我们写下代码， <style> @media (min-width: 1024px){ #xiangyingshi { width: 1024px; height: 300px; margin: 50px auto; background: blue; } }
- 03
我们继续写下其他浏览器尺寸的问题； @media (min-width: 768px) and (max-width: 1024px){ #xiangyingshi { width: 80%; height: 300px; margin: 50px auto; } }
- 04
然后再写下小部分尺寸的问题。 @media (max-width: 768px){ #xiangyingshi { width: 90%; height: 300px; margin: 50px auto; } }
- 05
我们在浏览器中看下最终效果。
- 06
把浏览器缩小再看下结果。为方便观看，加了颜色，完整代码为 <style> @media (min-width: 1024px){ #xiangyingshi { width: 1024px; height: 300px; margin: 50px auto; background: blue; } } @media (min-width: 768px) and (max-width: 1024px){ #xiangyingshi { width: 80%; height: 300px; margin: 50px auto; background:#0FC; } } @media (max-width: 768px){ #xiangyingshi { width: 90%; height: 300px; margin: 50px auto; background:#F00; } }