php调节媒体查询,媒体查询 - SegmentFault 思否

媒体查询

响应式布局：

1) pc端

1.类似于腾讯视频

容器的宽度随着屏幕的分辨率大小的改变而改变

2.纯响应式(与mobile兼容)

完全兼容移动设备

2) mobile端

手机型号不同，宽度不同

1.不要给容器【块元素】指定宽度，让它默认为100%

2.子元素【列元素】宽度使用相对单位，百分数

1.使用@media.products {

width: 990px;

margin: 0 auto;

}

.products>ul{

display:flex;

justify-content: space-between;

flex-wrap: wrap;

height: 100px;

overflow: hidden;

}

.products > ul > li {

width: 19.5%;

height: 100px;

background-color: rebeccapurple;

list-style: none;

}

@media screen and (min-width: 1300px) {

.products {

width: 1200px;

}

.products >ul>li {

width: 16.5%;

}

2.将不同分辨率的内容写到css文件中，用link引入到html文件中