有没有CSS高手?我做颜色词典碰到不同平台显示不一样的问题如何解决??

这几天在加班加点的做这个色彩宝典,碰到一个小问题,同样的排版,不同平台效果完全不一样,这个有什么办法可以解决吗?
temp.rar (26.8 KB)

1 Like

我没下css文件。

这个不是css語义的问题,这个有关各种不同分辨率的适配问题 :no_mouth:

有什么信息是依靠位置关系确定的吗?

如果没有,默认的流式本身放大缩小就是会重排的,跟一維的文字流放到不同窗口的编辑器里一样。

如果需要: flex grid 布局可能帮到你,以及vue应该有相关的多平台的库,会不会太重了。

update:

  1. 如果是指第一个图的宽度、字体大小问题,各个不同浏览㗊的版本不同,实现支持的标准各异,如果非要更多的兼容性,得写很多降級的兼容代码。
  2. 这个HTML 打开后,我这是这样的
  3. 理想的排版是?
GJJ{float:left;display:inline-block;margin:5px;}GJJ A{float:left;margin:2px;display:inline-block;color:#FFF;width:100px;height:50px;padding:3px;border-radius:15px;box-shadow: 0 2px 2px #333;text-shadow:1px 1px 2px #111;transition:all .2s ease-in-out;OVERFLOW:hidden;text-overflow:ellipsis;}GJJ A:visited{color:#bbb;border-radius:5px;}GJJ A:hover{color:#FDF;border-radius:5px;top:4px;}GJJ D{font-size:16px;line-height:20px;color:#DFF;}GJJ X{font-size:12px;display:block;color:#FFD}Q{background-color:#FEF;width:300px;display:inline-block;padding:5px;magin:0px;font-size:10px;}H2{clear:both;font-size:24px;display:block;}H2:before {content:"🎨 ";}
  1. float: left 是最初給图片设置其浮动于其周围的文字用的,整个标签加上,它周围就没有东西了啊
  2. 因为是发明給图片用的,所以文字的排版要避开用 float来实现位置,用 flex ,baidu 一下 flex ruanyifeng.
  3. 如果非要用 float 实现,大概有三四种方式要擦屁股,清除浮动之类的,我早忘了,可以百度,基本知识,不用記,但不建议,应该2022年了,flex 没有不支持的了吧
  4. 前端的问题很杂,互相影响关系太多,设计的不够清晰明白。請参考新出的 CSS 給的工具,问题会少点,mdn css 搜索之。
  5. 默认都是 inline 的一維流到二维,inline-block 主要是其block 的不可打断分割性,我試了下把 q 标签 float 左,其他标签对齐很难,难看,所以还是用 flex 吧,简单得很。
  6. <a href="entry://F7EBDC" style="background-color:#F7EBDC;">
  7. 很多不用JS的可用CSS实现的 http://youmightnotneedjs.com/
1 Like

非常感谢您的耐心解答,我对css是一知半解,边学便用。

在显示不正常的软件中打开 F12 看看是为什么,对症下药。

好的!!非常感谢!!