@charset "utf-8"; * { margin:0; padding:0; } body { background:#ccc; font-family:arial; text-align:center; color:white; line-height:200px; } div { height:200px; float:left; } /*当屏幕宽度大于980px时 */ @media (min-width:980px) { div { width:22.5%; margin-left:2%; background:blue; font-size:.5rem; margin-top:2%; } }/*当屏幕宽度小于980px 并且 大于640px时 */ @media (max-width:980px) and (min-width:640px) { div { width:47%; margin-left:2%; margin-top:2%; background:green; font-size:1rem; } }/*当屏幕宽度小于640px时 */ @media (max-width:640px) { div { width:96%; margin:2%; background:red; float:none; font-size:1.5rem; } }
1、CSS3响应适布局 @media用法, 响应适, 自适应。
2、拖动改变浏览器窗口大小看效果。
3、最适用于移动端的布局。
4、宽度可根据需求调整,当@media中的宽度条件满足时则该条件下的样式生效,否则反之!
5、字体大小变化(不只是用于设置字体大小,还可以用于设置元素的宽、高、定位等):字体大小单位是rem,是根据js中监听浏览器窗口大小的方法,去改变字体大小的。
注:(js代码中,是以移动端常见的宽度 750px 为标准,进行缩放的。可以根据自己的需要进行调整)。
6、当用rem单位,作为设置元素的宽、高、定位、字体大小等样式时,根据PSD设计稿中的px单位进行 缩小10倍 即可。
当PSD稿中一个按扭的宽度为:120px; 高度为:56px; 左外边距为:8px; 字体大小为:16px。
用rem单位写法:
button{ width: 12rem; height: 5.6rem; margin-left: 0.8rem; font-size: 1.6rem;}