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

5dhtml

! G8 A5 y1 d- T& g$ R( r0 O
" B! o( V( y, O' k$ I. d我发现PC上goldendict和安卓上比如欧路对css的解析有时候有无法接受的差异，导致同一个词典在不同设备显示有问题，我对CSS、HTML之类的是外行，只会根据别人的CSS做一些简单的修改，我看到FF大佬制作的词典里似乎有根据平台来适配,但是自己实际测试却无效，这是什么原因呢？我感觉要根据设备适配总得根据useragent什么的吧，像这样直接写可以吗？

4 J- Q% [1 C* g- D; h8 y+ d- EFF的collins词典
8 }) o& B2 b+ z$ m+ T3 S- J7 O

1. /* set automatically by script embedded in HTML */
   + A, ]1 J; @. B0 o% a$ [+ U
2. .windowsnt.goldendict{
   7 [: Z  r  o' `4 l
3.         font-size: 120%;
   ( q+ E! X$ L8 ^& ~0 R! w" q
4. }
   ; b4 [1 u) ~# B' D/ g. O
5. .windowsnt.goldendict .word_entry{
   
6.     margin-top: 20px;
   
7. }
   
8. .windowsnt.goldendict .tab_multiwords{
   1 _) y2 ]3 I5 B0 t( \
9.     margin-bottom: -20px;
   1 ~+ `5 c( P6 d" y# V4 [
10. }

复制代码

4 e2 B) x* u- P4 YLDOCE5：
. E0 T% P# {' j: D/ k6 Q9 B

1. .mobile .lm5pp_popup {
   1 L% e5 u. Z5 Y/ O) R/ ~) M
2.     bottom: 50px;
   6 d; J* _  W8 I' Q! `, R
3.     right: 10px;
   
4. }

复制代码

/ h7 t% Z3 B' F+ t$ f' Y1 @

ogrishman

直接这样写不行，想要让您的词典在不同平台都显示的很好，需要针对不同平台写特定的CSS，但是仅仅用CSS是不行的，要配合 JavaScript。一般做法是这样的：
比如你的一个词条HTML是这样的：
. @  m9 Y9 {  Q' D8 T
<p id="entry">
. ?. X7 s! ~+ D! n0 z3 K' P    <span class="headword">apple</span>
    <p class="meaning">a round fruit</p>
</p>
, |: j! B9 }6 U在 JavaScript里根据 useragent 判断当前是什么平台，然后用 JavaScript 给 <p id="entry"> 加上一个特定的 class, 比如是 Windows 平台，可能最后结果是 <p id="entry" class="windows">。然后在 CSS 里面就可以用类似您示例中的CSS来针对Windows平台写一些特定的样式了：
! i3 g) I4 `, r" T( K0 W
p#entry.windows {
....
}
8 Q9 e6 A' i$ K6 w, Y2 Y2 L/ ]
我有点印象F大大的词典好像就是这么做的，您可以参考看看。

deeke

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

1. .wordhead { padding-bottom: .2875rem; word-break: break-all; border-bottom: .08rem dashed #002047; }
     I+ G, ^. L0 U
2. @media screen and (max-width: 480px) { .wordhead { border-bottom: .08rem dashed transparent; } }

复制代码

更进一步的解决办法是 “自适应设计” 或 “弹性设计”，要看 CSS 的书。
5 g  e5 f% h' ~' Q  h  p

williamson

受教了，