前言：
目前你们对“htmldiv自适应”大概比较关心，同学们都需要分析一些“htmldiv自适应”的相关知识。那么小编也在网上收集了一些有关“htmldiv自适应””的相关知识，希望各位老铁们能喜欢，我们快快来学习一下吧！因为我在公司的开发电脑的分辨率是1920，所以一开始我实在1920分辨率下写得css样式表，然后完成之后放到投影的机器上做演示，分辨率是1400，结果就直接悲剧了。
在项目中遇到各种分辨率的调整问题，看到各位小伙伴们煎熬的表情，真的是于心不忍，于是查询对应的解决办法，从cssAPI中找到前人提供的高级用法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .change{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .change {width: 1200px} } /* 设置了浏览器宽度不小于1201px时 change 显示1200px宽度 */ @media screen and (max-width: 1400px) { .change {width: 900px} } /* 设置了浏览器宽度不大于1200px时 change 显示900px宽度 */ @media screen and (max-width: 900px) { .change {width: 200px;} } /* 设置了浏览器宽度不大于900px时 change 显示200px宽度 */ @media screen and (max-width: 500px) { .change {width: 100px;} } /* 设置了浏览器宽度不大于500px时 change 显示100px宽度 */ </style> </head> <body> <div class="change">CSS实例：DIV宽度会随浏览器宽度变化，尝试改变浏览器宽度</div> </body> </html> 另外，可以根据实际使用的情况或者封装策略，可以考虑分成多个css文件的配置方式
<!-- 分辨率低于1280，采用test1.css样式表 --><link rel="stylesheet" media="screen and (max-device-width:1440px)" href="test1.css"><!-- 分辨率高于1400，采用test2.css样式表 --><link rel="stylesheet" media="screen and (min-device-width:1920px)" href="test2.css">
总之上面两种方式都是对于适应各种分辨率的不同习惯写法，需要根据自己项目的封装规则自由选择。需要注意的是样式的排布顺序需要按照分辨率升序或者降序的顺序去设置，否则可能会出现设置之后并没有按照想象的效果去显示。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #htmldiv自适应
