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

5dhtml

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

0 F! u% Q* K$ P* g2 YFF的collins词典

1. /* set automatically by script embedded in HTML */
   
2. .windowsnt.goldendict{
   1 F% E& Y, m) Q' [. C
3.         font-size: 120%;
   
4. }
   & s3 h4 q8 Y0 x6 [
5. .windowsnt.goldendict .word_entry{
   
6.     margin-top: 20px;
   : ^3 l9 g4 q; T2 ~' G
7. }
   # @! v( C7 P  t
8. .windowsnt.goldendict .tab_multiwords{
   
9.     margin-bottom: -20px;
   : L& V+ i; w+ b
10. }

复制代码

( }' [9 ^  `, Y: F2 n+ {" e, bLDOCE5：

1. .mobile .lm5pp_popup {
   ) h' s# o2 c3 K; N
2.     bottom: 50px;
   
3.     right: 10px;
   8 \% h( Z3 k- s% b
4. }

复制代码

$ F1 r. M# n* T& _+ R

ogrishman

直接这样写不行，想要让您的词典在不同平台都显示的很好，需要针对不同平台写特定的CSS，但是仅仅用CSS是不行的，要配合 JavaScript。一般做法是这样的：
: S( d& E1 r$ D# v. U; y比如你的一个词条HTML是这样的：

<p id="entry">
5 R" {7 Y0 M$ f. ^% I; X- W    <span class="headword">apple</span>
    <p class="meaning">a round fruit</p>
; G/ K* {$ W& X: Y$ @" M, R</p>
在 JavaScript里根据 useragent 判断当前是什么平台，然后用 JavaScript 给 <p id="entry"> 加上一个特定的 class, 比如是 Windows 平台，可能最后结果是 <p id="entry" class="windows">。然后在 CSS 里面就可以用类似您示例中的CSS来针对Windows平台写一些特定的样式了：
) E  L3 X3 ^7 ]5 P
p#entry.windows {
# G. o2 F$ ]  b  e# l: }....
}
- q, E, e7 B+ x; ^! @) A8 g
我有点印象F大大的词典好像就是这么做的，您可以参考看看。
  F  L  |) L* S( h, s$ u

deeke

简单的办法就是根据屏幕宽度来判断。
* B  x2 k0 l" j9 A5 r* k+ D

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

复制代码

更进一步的解决办法是 “自适应设计” 或 “弹性设计”，要看 CSS 的书。
6 Q/ ^0 Y1 b% d0 K2 I% w

williamson

受教了，