html 的 head 排版问题

我制作了一个网站 用html编写
在pc端的时候我的第一行的标题的选项可以正常得展示在页面上
但是到了手机端的时候 因为缩进的问题而使有些选项无法正常显示
此处附上两张图片

img

img


该如何处理这种排版问题呢

  1. 长宽距离等使用百分百，相对值，别用绝对值
  2. 使用elementUi或者uniapp框架，可以专门解决不同终端机型兼容性问题
  3. PS“国外“英文是“abroad”，“aboard”是“板子”的意思，是不是你写错了?

你的head写的是固定值，在移动端，因为页面尺寸和pc端有所不同，并且为了有较高的兼容性，所以样式：
1.尽量避免用固定数值的px，可以采用百分比和相对值
2.可以使用@media screen and (max-width: 720px) and (min-width: 300px)来设定当屏幕宽度在某一范围内时使用的特定css样式
3.在设计移动端head时，大多采用的设计逻辑是只显示顶部logo和一个菜单小图标，通过点击菜单图标来显示head的具体菜单项