标签：方式 trap idt code 大屏 小尺寸 相对 body 宽度
固定网页布局：设置固定宽度，px为单位。常见PC端页面。
流式布局+伸缩布局+rem+媒体查询：设置相对宽度，%为单位。适配移动页面。
响应式布局：检测设备信息决定布局方式。一般通过检测设备的宽度。适合结构简单的页面。（比如公司宣传页面、个人博客）
栅格化布局：css框架Bootstrap。通常%为单位。
利用媒体查询，检测不同设备。
常见屏幕大小尺寸：
大屏幕：大于等于1200px(min-width: 1200px) PC端
默认：小于等于980px(max-width: 980px)
平板：大于等于768px(min-width: 768px)
手机：小于等于480px(max-width: 414px)
1 /* 默认是大屏幕 */ 2 body { 3 background: red; 4 } 5 /* 屏幕宽度为768px~980px时 */ 6 @media screen and (max-width:980px) and (min-width:768px) { 7 body { 8 background: blue; 9 } 10 } 11 /* 屏幕宽度小于768px时 */ 12 @media screen and (max-width:768px) { 13 body { 14 background: green; 15 } 16 }
标签：方式 trap idt code 大屏 小尺寸 相对 body 宽度
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11626647.html
