内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

怎么根据不同屏幕分辨率大小使用不同的CSS样式表文件

发布:2018-07-06 浏览: 评论(

在做流体页面的时候,想根据不同的屏幕加载不同的css样式表文件,可以这样做:

    <link href="/css/m1style.css" media="screen and (max-width:375px)" rel="stylesheet" />
    <link href="/css/m2style.css" media="screen and (min-width:375px) and (max-width:414px)" rel="stylesheet" />
    <link href="/css/m3style.css" media="screen and (min-width:414px) and (max-width:768px)" rel="stylesheet" />
    <link href="/css/style.css" media="screen and (min-width:768px)" rel="stylesheet" />

不过一般情况下不会使用这么多个css文件的,一般只一用一个手机端css文件,用一个PC端css文件就足够了,小于768px的使用手机版,大于768px的则使用PC端样式表:

    <link href="/css/style.css" media="screen and (min-width:768px)" rel="stylesheet" />
    <link href="/css/mstyle.css" media="screen and (max-width:768px)" rel="stylesheet" />

手机端的样式表写成不同屏幕都可以自适应就可以了;原理就是使用@media; 好了,赶紧去试试吧

前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4