Question

所以我有一个网站，带有响应式CSS（面向移动设备）。 CSS样式表具有适用于移动版本的规则，然后（在文件末尾）开始@media查询以扩大屏幕范围，然后移动。

当页面加载到桌面上（并且如果浏览器未缓存此页面）时，移动css首先加载，然后在不到一秒钟的时间内切换到桌面样式。因此，它在移动版本的CSS中闪烁（考虑到事实是，桌面比移动屏幕更宽，它在页面中延伸出巨大的元素），然后看起来还不错。

我知道，浏览器需要完全加载样式表，在这样做之前，它会显示已经加载的内容。我了解，这种行为是可以解释的，但仍然困扰着我。

有没有一种方法可以加载css而不用移动版本闪烁（但无需使其面向桌面（这样，桌面css首先加载，其余部分由@media查询处理）），我是否应该担心一下（还是很好，应该保持这种状态）？

以下是一些代码：

CSS之前的元标记：

  implementation 'com.google.android.material:material:1.0.0-rc01'

从HTML文件调用CSS：

<meta charset="UTF-8"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="apple-touch-icon" href="images/icn.png" />
<link rel="shortcut icon" href="images/icn.png" type="image/x-icon" />

CSS文件示例（简称（这只是文件中CSS结构的示例））：

<link rel="stylesheet" href="styles/page1.css">

Answer 1

几乎没有可以使用的方法

使用CSS文件的第一种方法

<link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">

使用Javascript的第二次

if (window.matchMedia('screen and (min-width: 600px)')){
  document.write('<link rel="stylesheet" 
                  href="small.css">');
}

我建议最好只使用一个css文件并定义如下概念：

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Answer 2

在媒体选择器中添加“最大宽度”应该可以解决问题：

@media only screen and (min-width:480px) and (max-width: 639px) {
}
@media only screen and (min-width:640px) and (max-width: 767px) {
}
@media only screen and (min-width:768px) and (max-width: 1024px) {  
}
@media only screen and (min-width:1024px) and (max-width: 1279px) {
    .first-panel {
        background: white;
        color:black;
    }
}
@media only screen and (min-width:1280px) {
}

在台式机上，移动CSS首先加载，然后切换到台式机版本

2 个答案: