响应式布局就是指一个页面同时适应多种不同的端口
主要实现方式: 百分比自适应布局
1.可采用媒体查询的方式
@media screen and (min-width:1000px){...} 对应PC端页面
@media screen and (max-width:1000px) and (min-width:768px) {...} 对应平板端页面
@media screen and (max-width:768px){...} 对应手机端页面
2.采用bootstrap框架布局
bootstrap框架布局完成的页面,是自动对应的自适应效果。
这需要我们严格按照bootstrap的书写规范,才不会出现怪异的问题。
写法举例:
<div class="col-md-6 col-sm-6 col-xs-12">
说明:最后的数字对应该div所占栅栏的列数。
col-md-6 代表在PC端上显示在一行的6个栅栏,也就是一半。
col-sm-6 代表在平板上也显示div占当前行的一半。
col-xs-12 代表在手机端显示为当前行的百分之百填充。
3. 还可以引入适配js文件,如 jquery 和专门做响应式的JS文件,均能实现自适应效果,实现响应式布局。
原文地址:https://www.cnblogs.com/sxxya/p/10491524.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。