css响应式布局

css响应式布局究竟是怎么回事呢。废话不多说直接上代码

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link media="(min-width: 500px)" rel="stylesheet" href="desktop.css">
  <link media="(max-width: 500px)" rel="stylesheet" href="mobile.css">

我们在html文件中加入 这一行代表我们引入媒体查询。

media="(min-width: 500px)"代表宽度如果小于500px 那么其対映的css便不会加载。