媒体查询
Posted jffun-blog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了媒体查询相关的知识,希望对你有一定的参考价值。
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 */ }
以上是关于媒体查询的主要内容,如果未能解决你的问题,请参考以下文章