媒体查询

Posted jffun-blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了媒体查询相关的知识,希望对你有一定的参考价值。

responsive design - On desktop PC, mobile css loads first, then it switches to the desktop version - Stack Overflow

There are few approach you can use

1st Approach by using CSS File

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

2nd by using javascript

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

I suggest for better one you need use only one css file and define the concept like as below :

@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 */ }

以上是关于媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

片段中的媒体控制器

如何对媒体片段的任何部分进行范围请求?

如何计算破折号媒体片段名称的 $Time$ 变量?

javascript 媒体片段

javascript 媒体片段

javascript WordPress媒体库JS片段