两个样式问题

Question

老师你好，

第一个问题是当窗口缩小这里发布时间和简介重叠

第二个问题就是如何限制文本中的图片不越界

Answer 1

张轩 2022-07-06 09:37:24

同学你好

非常认真的问题，点赞。

都是移动端的样式问题，我们的应用并没有兼容移动端的样式，因为多端样式问题不是我们主讲的，所以这里简单说一下。

第一个，针对小屏幕，可以使用响应式的方式，在手机的时候，给这里添加特定的样式，比如说左侧的作者信息根据屏幕大小，设置不同的宽度，可以研究一下 bootstrap 提供的响应式 grid：https://getbootstrap.com/docs/5.2/layout/grid/

比如可以将类名更改为：

这个意思就是 在大于 md 的屏幕上，占一半的长度，在小于 md 的屏幕上，占整行，这样就可以解决问题。

第二个问题：可以给图片设置 max-width 来设置它的最大宽度。

• 提问者 慕莱坞3345942 #1

  感谢！
  第二个问题还是不太会，从接口获取的 currentPost.content 直接渲染到了页面上，如何给其中的图片设置 max-width 呢。 
  尝试直接给 p 标签加上后，只有文本收到了约束，图片还是越界的。
  同时这个 max-width 的值应该如何设置呢，是根据页面设置多个响应式的值吗

• 张轩 回复 提问者 慕莱坞3345942 #2

  同学可以了解一下 vw 这个单位，它是以当前视窗宽带为基准的单位，
  比如 max-width: 100vw  这样最宽就和窗口宽度保持一致
  但是在这里，没发实现，因为这几个正文，是我从别的网站抓取的，带着特定的 html 标签，限定死了它的宽度(600px 如果你去看源代码就会发现)，当然这是个特例，其他情况下可以按我说的进行处理。

• 提问者 慕莱坞3345942 回复 张轩 #3

  感谢！