响应式布局.

初学的时候,我总是把响应式布局和移动端适配两个事情搞混了.

响应式布局:

在不同的设备宽度下,一定会产生不同的显示样式.某些元素会隐藏或显示,会从行内元素变成块状元素.

移动端适配

一般仅仅限于移动端,也就是手机屏幕的适配.搭配rem,在任何手机设备上显示的样式都是一致的.只不过根据屏幕宽度要动态的计算每一个元素的比例.

响应式布局里,会根据不同的屏幕宽度来设置不同的样式.

所以,关键点在于屏幕宽度.

响应式布局主要通过:(媒体查询 media query) 来为不同的尺寸的屏幕下同一个元素来设置不同的样式.

---

样式内媒体查询

Media Query

用来检测当前设备的(主要是屏幕)的宽度.对于Web开发者者来说,99.999%不是电脑屏幕就是手机屏幕.

基本语法如下:

 @media screen and (min-width:500px) {
      body {
        background-color: red;
      }
    }

如果当前设备是屏幕 (screen),且宽度大于等于 500px , 那么 body 就设置样式为 background-color:red

一般可以将所有的情况的媒体查询都写在一个样式内.(bootstrap就是这么做的).

当然对于我来说,我不太喜欢这种方式.

代码都冗杂下一个样式文件里.很难看.

虽然压缩后,只有一个css文件,也就是一个http请求.

但是对于可以做css缓存,以及马上普及的5G技术来说.

样式这点小文件的网络请求又有多大的问题呢?

---

样式表链接的媒体查询

我们在页面导入样式的时候,使用 <link> 标签.

 <link rel="stylesheet" href="./main.css">

但其实,可以利用媒体查询指定样式应用在哪种屏幕宽度下.

 <link rel="stylesheet" href="./desktop.css" media="(min-width: 768px)">
 <link rel="stylesheet" href="./mobile.css" media="(max-width:768px">

对于上述两行<link> 链接而言.

• 如果屏幕宽度大于 768 px ,那么就使用 desktop.css 这个样式文件.
• 如果屏幕宽度小于 768 px, 那么就使用 mobile.css 这个样式文件.

大概是这么一个例子.

一个个人博客.在电脑设备上(width > 768 px)

长这个样子.

width>768px 套用 desktop.css 样式文件

在移动端(width < 768 px)

它长这个样式.

width<768px 套用 mobile.css 样式文件

根据不同的屏幕宽度,浏览器通过 link 标签的 media 属性,来应用不同的样式文件.
从而应用不同的样式规则.

这个就是所谓的响应式布局.

这样写的好处:

• 不同的屏幕宽度的样式代码可以写在各自不同的样式文件里.
• 文件层次结构非常清晰.
• css代码中不需要写恶心的 media query 代码.
• 避免将所有的css的media query 代码像bootstrap一样恶心的都在一个样式文件里.又难看又难维护.
• 一些公用的样式,可以写在一个独立公用的样式文件里,比如上述例子中的 main.css

这样写的坏处:

• 样式文件变多了.
• 就意味着会有多个http请求.
• 一个样式文件即使用户不会用到,也会下载下来.

但是对于现在的互联网时代(5G的到来),以及可以利用http缓存机制来缓存.
这样的缺点真的无法接受吗?

清晰易读的代码以及文件结构,我觉得还是很重要的.

码云地址