本文给大家介绍pc端移动端不同屏幕大小下响应式布局，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
先上效果图：
PC端效果：
移动端效果：
代码如下：
响应式布局
- 1
- 2
- 3
- 4
pc.css 样式代码：
*{margin:0;padding:0;}ul{width:calc(100% - 20px);padding:0 10px;margin:100px auto;height:auto;overflow:hidden;}ul li{list-style:none;border:1px solid blue;width:calc(25% - 2px);height;100px;float:left;text-align:center;}
mobile.css 样式代码：
*{margin:0;padding:0;}ul{margin:100px auto;padding:0 5px;height:auto;overflow:hidden;}ul li{list-style:none;border:1px solid red;width:calc(100% - 2px);height;100px;float:left;text-align:center;}
我设置的临界点是699px,实际项目中大家可根据项目需求来设置更为精准的不同屏幕下的css,一般考虑PC端，Pad，手机端 三种就可以了！
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程！
以上就是PC端移动端不同屏幕大小下响应式布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612370.html
微信扫一扫 
支付宝扫一扫 
