雅安论坛

标题: 响应式设计判断手机访问或者电脑访问下显示不同的css样式 [打印本页]

---

作者: 匿名    时间: 2020-8-11 23:22
标题: 响应式设计判断手机访问或者电脑访问下显示不同的css样式
响应式设计判断手机访问或者电脑访问下显示不同的css样式，希望管理加分
响应式自然不说它，基本上很多都会用到。如果在后期开发中添加判断不同分辨率来加载不同的css样式的时候，希望这篇文章对你有所帮助
我们需要明白响应式代码：

1. <style>
   
2. @media screen and (max-width: 500px) {
   
3. .ig { height: 50px; width: auto\9; width:100%;}
   
4. }  
   
5.   /* 设置了浏览器宽度小于500px时 .ig 显示50px高度 */
   
6. @media screen and (min-width: 800px) {
   
7. .ig {height: auto; width: auto\9; width:100%;}
   
8. /* 设置了浏览器宽度不小于800px时 ig 显示铺满屏幕宽度 */
   
9.   </style>

复制代码

把这个响应式的放在一个叫.ig的里面。然后通过<img class="ig"来控制
(, 下载次数: 100)

上传

点击文件名下载附件

补充下判断分辨率代码：

1. .abc{ height:300px; border:1px solid #000; margin:0 auto}
   
2. @media screen and (min-width: 1201px) {
   
3. .abc {width: 1200px}
   
4. }
   
5. /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
   
6. 
   
7. @media screen and (max-width: 1200px) {
   
8. .abc {width: 900px}
   
9. }
   
10. /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
    
11. 
    
12. @media screen and (max-width: 901px) {
    
13. .abc {width: 200px;}
    
14. }
    
15. /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
    
16. 
    
17. @media screen and (max-width: 500px) {
    
18. .abc {width: 100px;}
    
19. }
    
20. /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

复制代码

这里需要注意的是很多时候<img>有很多，要通过class来控制，添加位置上面已有，注意在style中的.和#用法

---

欢迎光临 雅安论坛 (https://www.yaanbbs.net/)

Powered by Discuz! X3.4