如何为每台PC /手机应用CSS [WordPress]

2019年7月10日

假设这样的情况

  • 我只想在PC /手机屏幕上显示CSS
  • 我使用其他CSS更改了设计，但在我的智能手机上崩溃了
  • 我想设置适合智能手机/平板电脑/ PC等设备的填充和边距
  • 您要应用的CSS的数量不是很多

如何

只需遵循“ @media screen”，使用“ and（）”指定要反映的设备的屏幕宽度，然后在“ {}”中输入CSS代码即可。　

  • 仅在PC上反映
@media屏幕和（最小宽度：980px）{在此处输入CSS}　
  • 仅在平板电脑上反映
@media屏幕和（最小宽度：481像素）和（最大宽度：979像素）{在此处输入CSS}　
  • 仅反映在移动设备上
@media屏幕和（最大宽度：480px）{在此处输入CSS}　
  • 仅PC和平板电脑或仅平板电脑和手机
/ * PC和平板电脑* / @media屏幕和（混合宽度：481px）{在此处输入CSS} / *平板电脑和移动设备* / @media屏幕和（最大宽度：980px）{在这里输入CSS}　

「最大宽度：480px屏幕宽度为最高480像素的设备 ＝ 小于或等于480像素智能手机等

反之亦然”最小宽度：980px“我，最小980像素= 980像素或更多电脑的屏幕宽度。

  • 仅限PC和平板电脑

屏幕宽度的描述基于以下内容，适用于大多数设备。

智能手机 ：小于或等于480像素
片剂 ：768〜980像素
个人计算机：980像素或更多

参考：屏幕宽度

如果您尝试将其在智能手机上横向倾斜，则将超过480像素。即使在个人计算机上，如果仅在屏幕的一半上显示它，它的宽度也可能与平板电脑一样大。

在 iPhone 上，下图将作为屏幕尺寸的参考。 在 CSS 中，屏幕宽度是px（像素）但是在设备方面点请注意，它表示为。

图片：部分摘自《iPhone 分辨率终极指南》

例如，iPhone X
点：375 x 812
像素：1125 x 2436
但是，CSS指定的宽度为375。

程式设计