На настольном ПК сначала загружается мобильный css, затем он переключается на настольную версию - PullRequest
Новая
       9

На настольном ПК сначала загружается мобильный css, затем он переключается на настольную версию

0 голосов
/ 03 декабря 2018

Итак, у меня есть веб-сайт с отзывчивым CSS (ориентированным на мобильные устройства).В таблице стилей CSS есть правила для мобильной версии, затем (в конце файла) запросы @media начинаются для более широких экранов, а затем для мобильных.

Когда страница загружается на рабочий стол (и если эта страница некэшируется браузером), сначала загружается мобильный css, затем менее чем за секунду он переключается на стили рабочего стола.Так что он мигает с мобильной версией CSS (учитывая тот факт, что рабочий стол шире, чем мобильный экран, он растягивает огромные элементы по всей странице), затем выглядит хорошо.

Я понимаю, что браузер должен загрузитьТаблица стилей полностью, и, прежде чем это сделать, он показывает, что он уже загружен.Я понимаю, что это поведение объяснимо, но оно все еще меня беспокоит.

Есть ли способ загрузить css, не мигая с мобильной версией (но БЕЗ создания ориентации на десктоп (так, чтобы css на рабочем столе загружался первым,а остальное было обработано запросами @media)) и стоит ли мне вообще беспокоиться об этом (или это просто нормально и должно оставаться таким)?

Вот код:

Метатеги до 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 из файла HTML: 

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

Пример файла CSS (сокращено (это только пример структурыCSS в файле)): 

html {
    margin:0;
    height:100%;
    padding:0;
}
body {
    height:100%;
    margin:0;
    padding:0;
    font-size:16px;
}
.first-panel {
    background: black;
    width:250px;
    height:100vh;
    color:white;
    position:fixed;
    left:0;
    clear:both;
    top:0
}
.no-user-select {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
@media only screen and (min-width:480px) {
}
@media only screen and (min-width:640px) {
}
@media only screen and (min-width:768px) {  
}
@media only screen and (min-width:1024px) {
    .first-panel {
        background: white;
        color:black;
    }
}
@media only screen and (min-width:1280px) {
}

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Добавление «max-width» в ваш медиа-селектор должно помочь: 

@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) {
}
0 голосов
/ 03 декабря 2018

Существует несколько подходов, которые вы можете использовать

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">

2-й подход с использованием 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 */ }
...