01前端/媒体查询的三种方式

  • 更新时间：2020-02-11 23:04
  • 创建时间：2020-02-11 23:04

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

1
2
<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

1
2
3
4
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 :

1
2
3
4
5
6
@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 */ }