如果一个网页既要使用于 pc 端 又得使用于移动端 :
1. 响应式设计 利用媒体查询判断设备的宽度 采用不同的 CSS 华为官网和苹果官网
2. 设计开发的时候 直接开发两个版本 PC 和移动端两个版本 发送请求一个网页的 时候, 根据请求判断当前设备类型 返回不同的一个网页 [淘宝 百度]
媒体查询赋予 CSS 有判断设备类型和屏幕尺寸的能力
媒体查询样式仅在条件成立的时候执行
- @media(条件 1, 条件 2){
- }
- (注释: max-width 最大的宽度 指的是视口的宽度 )
- @media(max-width:1600px) {
- section {
- background-color: yellowgreen;
- width: 1200px;
- }
- }
- @media(max-width:1200px) {
- ( 注释: 当视口的宽度小于 1200px 的时候 满足该条件)
- section {
- background-color: orange;
- }
- }
- (注释: 宽高比 小于 1/1)
- @media(max-aspect-ratio:1/1) {
- .box {
- height: 300px;
- }
- }
媒体查询
来源: http://www.bubuko.com/infodetail-3210141.html