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

5dhtml

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

FF的collins词典

1. /* set automatically by script embedded in HTML */
   
2. .windowsnt.goldendict{
   * g1 R7 r1 Q# M8 b- H" \+ L
3.         font-size: 120%;
   2 t) ?  V) B, E% D& ]0 R1 @
4. }
   + `1 U* c6 v+ }7 b" l% v4 n
5. .windowsnt.goldendict .word_entry{
   
6.     margin-top: 20px;
   # u% X: k( x/ U5 Q/ C/ N; m0 k
7. }
   
8. .windowsnt.goldendict .tab_multiwords{
   
9.     margin-bottom: -20px;
   
10. }

复制代码

4 g1 ]0 x$ K$ ]LDOCE5：
9 m% f  g8 W/ J2 ^/ g

1. .mobile .lm5pp_popup {
   
2.     bottom: 50px;
   
3.     right: 10px;
   
4. }

复制代码

ogrishman

直接这样写不行，想要让您的词典在不同平台都显示的很好，需要针对不同平台写特定的CSS，但是仅仅用CSS是不行的，要配合 JavaScript。一般做法是这样的：
3 }. J4 |" u8 ]3 Y( g比如你的一个词条HTML是这样的：
' I; t6 d: V7 t: n! {- w# M
<p id="entry">
    <span class="headword">apple</span>
    <p class="meaning">a round fruit</p>
</p>
. ?2 Q. f. O' |( S5 y2 X7 f, {在 JavaScript里根据 useragent 判断当前是什么平台，然后用 JavaScript 给 <p id="entry"> 加上一个特定的 class, 比如是 Windows 平台，可能最后结果是 <p id="entry" class="windows">。然后在 CSS 里面就可以用类似您示例中的CSS来针对Windows平台写一些特定的样式了：
( }* S' H% {0 ?' S
" W7 V8 g6 F* L3 v7 C% B1 kp#entry.windows {
....
}
5 `1 E4 X; \8 j4 R
, k; L" q3 A# \) I0 a2 \我有点印象F大大的词典好像就是这么做的，您可以参考看看。

deeke

简单的办法就是根据屏幕宽度来判断。
' ^: ]( A1 X( n6 g: R8 ?

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 的书。

williamson

受教了，