关于CSS的一些经验总结（三）PC端，移动端

PC端和移动端的差异

作为一个常规的前端，所能碰到的项目，总结不过是两个类型。其一为PC端项目，例如官网，后台等等，其二为移动端项目，例如我们手机浏览阅览的页面，混合APP等。

PC端和移动端项目，一个在电脑中运行，一个在手机上运行，两者因为在不同的设备上去运转，就会出现很大的差异。

这篇博客主要就是分享编写PC端和移动端项目的时候，对于CSS样式的一些不同的处理，和对一些特殊情况的解决方案。

PC端

填充内容的盒子：首先在PC端中，通常我们编写页面的时候，是需要一个用来装内容的盒子，来应对各种常规不同分辨率下带来的页面样式错乱的困扰。对于正常大小的屏幕，我们可以定义一个方案，提供一个展示页面内容，具有一定宽度的盒子（例如给定1200px的宽度盒子，然后两侧空白可选择不展示内容，类似于百度贴吧的一个页面。）

什么是响应式，响应式就是为了同时兼容移动端和PC端的浏览器页面所作出的解决方案。通常情况下通过设置media媒体查询属性去解决不同分辨率下的页面显示。

响应式：响应式并不一定是适用于所有页面，上面提到的常规一词就是为了分开响应式的页面，对于常规的PC端页面我们不需要做响应式，通常情况下内容居多的一个页面也不太适合做响应式。所以通常情况下我们只对于页面内容较为对称，或者平铺内容较多的页面去做一个响应式的处理。

移动端

移动端比起PC端就没那么多方案去纠结了，正常的移动端方案都必须要有一个功能，那就是自适应页面。

对比起PC端，移动端的各设备分辨率都较为接近，所以如果我们要去完成一个能适配各大手机品牌的体验良好的页面，那就必须用到自适应技术，关于自适应，这篇博客已经有详细地描述了自适应的方案，如果需要了解更多vue移动端适配之rem解决方案

移动端除了自适应的问题，还存在着一些不同浏览器，不同手机型号的样式兼容问题，但是随着浏览器的升级，现在这类问题已经相对较少出现，大多数时候都是出现在IOS端和安卓端，由于这两大主体系统不同而引起的问题。

常用技巧

1.居中方案（三种）

居中方案可以说是几乎百分之99的项目都得用到，以下是三种最常用的居中方案

①首先，如果内容只有一行的情况下并且最好元素皆为行内元素，可使用：

.center{
  line-height: **px;  /*上下居中，已知内容高度*/
  text-align: center;
}

②绝对居中，用于绝对定位的居中

.aboslute_center{
  position: absolute;
  top: 50%;
  left: 50%;
  tranform:translate(-50%, -50%)
}

③万能居中，flex居中方案

.flex_center{
  display: flex;
  justify-content: center;
  align-items: center;
}

自适应与固定宽度同行布局

①flex布局，设置父元素为flex布局，其中自适应盒子的flex属性值为1，代表占满剩下所有位置即可

.father{
  width: 100%;
  display: flex;
}
.child_1{
  width: 100px;
}
.child_2{
  flex:1
}

②一个元素固定宽度，另一个浮动即可

.left,.right{
  height: 200px;
}
.left{
  float: left;
  width: 200px;
  background: red;
 }
.right{
 margin-left: 200px;
 background: blue;
}

结语

关于CSS的各种技巧和经验其实更多的是来自于项目中的实践，只有通过项目的累积，才能提高自己编写静态页面的能力。前端相对于后端而言，更大进步的空间往往都是来源于在项目中解决各种各样问题后的一个收获，前端开发只有通过不断尝试，不断错误，这样才能理解每一步操作背后的意义。