怎么样在css里根据设备/平台来适配不同的样式？

5dhtml

我发现PC上goldendict和安卓上比如欧路对css的解析有时候有无法接受的差异，导致同一个词典在不同设备显示有问题，我对CSS、HTML之类的是外行，只会根据别人的CSS做一些简单的修改，我看到FF大佬制作的词典里似乎有根据平台来适配,但是自己实际测试却无效，这是什么原因呢？我感觉要根据设备适配总得根据useragent什么的吧，像这样直接写可以吗？
8 `; [; [9 l* K2 O, E" V# i- j
# D9 I. B4 \8 S2 c7 FFF的collins词典
/ K' Y" p! e6 X8 |# ^& p

1. /* set automatically by script embedded in HTML */
   $ ~0 Q9 {6 i0 j1 e" W6 u* q
2. .windowsnt.goldendict{
   + w6 G: ^0 ~) N5 h
3.         font-size: 120%;
     f/ G- B0 n+ C: S3 Y6 M) {, {
4. }
     o- W( _* @# @/ I
5. .windowsnt.goldendict .word_entry{
   
6.     margin-top: 20px;
   - e2 y" E+ z. G1 h0 A. J+ R" Y2 [
7. }
   
8. .windowsnt.goldendict .tab_multiwords{
   + a" u5 o2 r' Q8 j" t
9.     margin-bottom: -20px;
   
10. }

复制代码

LDOCE5：

1. .mobile .lm5pp_popup {
   
2.     bottom: 50px;
   9 r, f. E2 m- I: \8 X6 O! v
3.     right: 10px;
   * h8 b& I  p0 f5 {* S% x' y5 \
4. }

复制代码

# g+ @6 F' k8 ]; ^

ogrishman

直接这样写不行，想要让您的词典在不同平台都显示的很好，需要针对不同平台写特定的CSS，但是仅仅用CSS是不行的，要配合 JavaScript。一般做法是这样的：
3 T6 J$ C' o* g: J) X比如你的一个词条HTML是这样的：

<p id="entry">
" ~2 W4 d' H' ~    <span class="headword">apple</span>
    <p class="meaning">a round fruit</p>
5 f8 a1 F7 V' t& r6 Z3 j</p>
7 I7 J5 n. }% q9 }3 Z7 h在 JavaScript里根据 useragent 判断当前是什么平台，然后用 JavaScript 给 <p id="entry"> 加上一个特定的 class, 比如是 Windows 平台，可能最后结果是 <p id="entry" class="windows">。然后在 CSS 里面就可以用类似您示例中的CSS来针对Windows平台写一些特定的样式了：
1 m0 i8 ~; p5 ?! t" a
5 w( z6 d# f' m5 xp#entry.windows {
$ c; d  T4 B' o( O: |9 U....
}

" S  I- }  g8 Y+ t9 c我有点印象F大大的词典好像就是这么做的，您可以参考看看。

deeke

简单的办法就是根据屏幕宽度来判断。

1. .wordhead { padding-bottom: .2875rem; word-break: break-all; border-bottom: .08rem dashed #002047; }
   1 w( _0 x/ a% H
2. @media screen and (max-width: 480px) { .wordhead { border-bottom: .08rem dashed transparent; } }

复制代码

更进一步的解决办法是 “自适应设计” 或 “弹性设计”，要看 CSS 的书。

' N5 \7 j8 b$ k1 i; U

williamson

受教了，