响应式布局有几种方法【响应式布局的实现方法和原理】

您的位置：制图网首页 -> 新闻动态 -> 响应式布局有几种方法【响应式布局的实现方法和原理】

响应式布局有几种方法【响应式布局的实现方法和原理】

2023/1/31 来自于：制图网点击：86

响应式布局就是让网站自动适应用户终端设备如：PC、手机、平板等，首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，我这里使用媒体查询的方法取得客户端屏幕尺寸，你也可以自己再扩展。

响应式布局

响应式布局CSS代码:

/*响应式布局*/ .tpt-wp{margin:0 auto;width:100%} .tpt-cm{font-size: 18px;color: #333;text-align: center;background: #f2f2f2;height: 200px;line-height: 200px;padding: 10px;margin: 10px;} .tpt-md-4{float:left} .tpt-md-3{float:left} .tpt-md-2{float:left} /*浏览器宽度小于767px*/ @media only screen and (max-width:767px){ .tpt-md-4{width:50%} .tpt-md-3{width:100%} .tpt-md-2{width:100%} .tpt-ml-3{display:none} .tpt-mr-3{display:none} .tpt-ml-7{width:100%} .tpt-mr-7{width:100%} } /*浏览器宽度大于768px,小于1023px*/ @media only screen and (min-width:768px) and (max-width:1023px){ .tpt-md-4{width:50%} .tpt-md-3{width:50%} .tpt-md-2{width:50%} .tpt-ml-3{display:none} .tpt-mr-3{display:none} .tpt-ml-7{width:100%} .tpt-mr-7{width:100%} } /*浏览器宽度大于1024px,小于1199px*/ @media only screen and (min-width:1024px) and (max-width:1199px){ .tpt-md-4{width:33.33333333%} .tpt-md-3{width:33.33333333%} .tpt-md-2{width:50%} .tpt-ml-3{float:left;width:30%} .tpt-mr-3{float:right;width:30%} .tpt-ml-7{float:left;width:70%} .tpt-mr-7{float:right;width:70%} } /*浏览器宽度大于1200px*/ @media only screen and (min-width:1200px){ .tpt-md-4{width:25%} .tpt-md-3{width:33.33333333%} .tpt-md-2{width:50%} .tpt-ml-3{float:left;width:30%} .tpt-mr-3{float:right;width:30%} .tpt-ml-7{float:left;width:70%} .tpt-mr-7{float:right;width:70%} .tpt-wp{width:1200px;margin:0 auto} } /*NET*/

四等分布局：

制图网(www.makepic.net)，专业的logo免费设计在线生成网站，全自动智能化logo设计，商标设计，logo在线生成！

欢迎使用制图网制作属于您公司自己的logo，不仅专业而且经济实惠，全方位满足您公司品牌化、视觉化的需求。