css 使富文本编辑器中的内容 在手机端自适应

荆轲刺秦王

我们在做网站的时候 经常会遇到  这样的情况：网站的内容是 cms 系统后台用 富文本编辑器 填充的，这个时候，就有一个问题：当屏幕分辨率变成 750px 以下，也就是手机端的时候，后台用富文本编辑器填充的内容样式就会变化，最重要的是，在富文本编辑器里面添加的图片就会错位。我么来分析一下：

通常情况下，在 富文本编辑器 添加的内容一般都会自带一些 html 和 css  ，这就导致我们在后台富文本编辑器里添加的图片是有固定宽高的，这个时候 我们需要图片能够 居中显示 并且 自适应屏幕大小

首先用到：@media(max-width:750px){}

我们所有针对手机端或者说屏幕分辨率在 750px 以下的样式 全都写到这个里面

其次给富文本编辑器内容的 img 添加样式：

background-size:contain;
width:90%;
height: auto;
margin: 0 auto;
display: block;

这样一来，效果就像这样：

我们再来看看，PC端的样式：

这样设置，就可以使手机端和PC端看起来都很舒适。

我们来分析一下这个 ：

background-size:contain;

background-size 的属性还有很多，例如：cover  

相同点：图片都是等比例缩放  换句话说就是：都是将图片以  相同宽高比  缩放以适应整个容器的宽高

不同点：

       cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

可以看到：上面的效果是由：background-size:contain; 实现的。

具体使用那种 还需要根据自己的业务情况 来选择。