📖前端多终端自适应网页开发模式

发布： 2017-12-22

热度： 61

趋势： 61

权重： 6

分类： 前端开发

标签： CSS  移动端  自适应

🎯

智能移动终端大爆发的现阶段，手机访问网页已经成为人们不可或缺的使用习惯，开发自适应网页大势所趋，实际上无论改造还是开发本身并不复杂，但是掌握更好的开发模式会使得你编写页面更加高效快捷

关于自适应网页

所谓自适应网页，通过屏幕的宽度实现加载对应的 CSS 样式表，提高移动终端的访问体验。

自适应网页主要用于解决，PC 网页在移动端显示出现字体过小、模块错位、浮动遮挡等不良体验。

实际上网页无论是否进行了自适应，通过手机/平板等移动终端都是可以访问的。

但是对网页做移动端自适应适配，在如今是非常有必要的。

自适应三要素

自适应网页开发简单归纳为以下三大要素：

选定关键屏幕宽度判断
当你要开始进行自适应网页开发的时候，你需要在内心中有大致的布局，明确需要开发几套自适应的配套模板。
然后通过指定 min-width and max-width（选定关键屏幕判断）进行 CSS 覆写。
宽高尽量使用百分比
自适应网页更多的时候是为了给移动终端带来更好的访问体验，但是移动终端的种类繁多，特别是屏幕尺寸应有尽有。
你不可能对所有的宽度都开发模板，那样工作量太大而且没有意义。
因此如果对元素的各项 px 属性均指定为百分比，就可以一套自适应模板适配于各类尺寸的屏幕中。
遵循代码聚合的原则
开发自适应网页需要覆写大量的 CSS，在开发过程中尽量规划某一个区域专门进行代码编写。
否则将有可能出现大量冗余样式（特别是大量冗余的屏幕尺寸判断语句）以及样式冲突，对于后期调试极为不利。

自适应开发方式

实际上自适应开发是一件非常简单的事情。

其麻烦并不在于技术，而是对整个网页的 CSS 样式进行重新编写，这是一个比较浩大的工作。

那么如何进行自适应开发呢？

首先网页的 head 区域要标注一个这样的 viewport 元标签。

<!DOCTYPE html>
<html lang="zh_CN">
  
  <head>
    <!-- 网页的宽度自动适应手机屏幕的宽度 -->
    <!-- width=device-width ：表示宽度是设备屏幕的宽度 -->
    <!-- initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100% -->
    <!-- minimum-scale=1.0：表示最小的缩放比例 -->
    <!-- maximum-scale=1.0：表示最大的缩放比例 -->
    <!-- user-scalable=no：表示用户不可以调整缩放比例 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"></head>

</html>

传统 CSS 覆写

在原来的 CSS 文件中增加覆写，举例说明。

案例已经完全包括了自适应开发中应用到的所有方法，比较简单。

/*原始的网页样式*/
.container {
  width: 1200px;
  margin - right: auto;
  margin - left: auto;
  padding - left: 15px;
  padding - right: 15px
}
/*当屏幕宽度小于等于991px时，一般多为手机*/
/*className为container的元素宽度为100%*/
@media(max - width: 991px) {.container {
    width: 100 %
  }
}
/*当屏幕宽度大于等于992px且小于等于1099px时，一般多为平板*/
/*className为container的元素宽度为90%*/
@media(min - width: 992px) and(max - width: 1099px) {.container {
    width: 90 %
  }
}
/*当屏幕宽度大于等于1100px时，常规电脑*/
/*className为container的元素宽度为1100px*/
/*此处用于举例，实际这个样式是多余了，默认就是>1100px*/
@media(min - width: 1100px) {.container {
    width: 1100px
  }
}

关于 CSS 覆写

我们将根据 CSS 样式渲染生效原则，在这里简单提一下

浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表 ID 选择器 < 外部样式表 ID 派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表 ID 选择器 < 内部样式表 ID 派生选择器 < 内联样式

关于这么多种样式生效类型，就不一一介绍了，这属于 CSS 的基础。

完整 CSS 覆写

定义一个全新的文件，与原来的 CSS 样式文件互不干扰。

值得注意的是，自适应的样式表一定要放在原始样式表的下面。

CSS 样式渲染生效还有一个基本原则就是，后者覆写前者（或者又称为距离元素最近的样式生效） 。

这种方式与传统方式的差异在于不需要指定大量的 @media 标签在 CSS 文件中，与源 CSS 样式表分开，易读性高。

在开发的时候就和正常编写 CSS 样式一致，更为高效。

<!DOCTYPE html>
<html lang="zh_CN">
  
  <head>
    <!-- 原始的样式表 -->
    <link rel="stylesheet" href="/static/css/index.css">
    <!-- 当屏幕宽度低于768px时会加载这个CSS文件 -->
    <link rel="stylesheet" href="/static/css/mobile.css" media="screen and (max-width:768px)"></head>

</html>