响应式开发 使用媒体查询
@media css3属性
通过媒体查询 判断屏幕大小 决定使用什么布局
我要评论/* 媒体查询里面 是一个独立的css语法环境 */
@media(判断条件){ // min-width max-width width
元素样式
}
手机 width < 768px
平板 width > 768px && width < 992
桌面显示器 width > 992px && width <1200
大桌面显示器 width > 1200px
1.显示的结构上
响应式开发 不同屏幕大小 会显示不同的布局 但是图片以及字体的大小不会发生变化 仅仅是布局
原生的移动端开发 根据屏幕大小不同 对页面内容进行等比缩放
2.开发的页面不同
响应式开发 开发的只是一个页面 而且同时运行在移动端和pc端 但是他根据不同的屏幕大小 会调整布局 展示对应的页面
移动端开发 其实是开发两套页面 分别针对于移动端和pc端进行开发 当在不同端时 加载对应页面
3.应用场景不同
响应式开发 使用一个页面适配多个终端 开发效率高 但是由于所有的代码都在一个页面上 所以会有冗余 运行效率低 ,一般用于单纯的展示和宣传页面 一般公司官网 活动页面
移动端开发 针对每一个不同的端 都要开发出一套页面 开发维护效率低 但是由于针对性强 只需要对应端的页面代码 运行效率高
一般这种会适用于老网站 对于已经上线的老系统 需要开发移动端 就单独在写一套移动端代码 而且还适用于页面性能要求很高的页面
例如 电商网站 直播网站
需求：
大屏 一行4列
中屏 一行3列
小屏 一行2列
超小屏 一行1列
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col{
border: 1px solid;
text-align: center;
line-height: 50px;
}
/* 大屏 */
@media (min-width: 1200px){
.col{
width: 25%;
}
}
/* 中屏 */
@media (min-width: 992px) and (max-width: 1200px){
.col{
width: 33.33%;
}
}
/* 小屏 */
@media (min-width: 768px) and (max-width: 992px){
.col{
width: 50%;
}
}
/* 超小屏 */
@media (max-width: 768px){
.col{
width: 100%;
}
}
</style>
通常在使用栅格系统时 会把页面分成12份
/* 一行12个 每份占1/12 */
.col_1 {
width: 8.333%;
}
/* 一行6个 每份占2/12 */
.col_2 {
width: 16.662%;
}
/* 一行4个 每份占3/12 */
.col_3 {
width: 25%;
}
/* 一行3个 每份占4/12 */
.col_4 {
width: 33.333%;
}
/* 一行2个 每份占6/12 */
.col_6 {
width: 50%;
}
.col_8 {
width: 66.667%;
}
/* 一行6个 每份占1/6 */
.col_12 {
width: 100%;
}
响应式栅格系统原理
把屏幕分成12列
如果是1列布局 那么就把12列合并 也就是 col-12
如果是2列布局 那么就把6列合并 也就是 col-6
如果是3列布局 那么就把4列合并 也就是 col-4
如果是4列布局 那么就把3列合并 也就是 col-3
如果是6列布局 那么就把2列合并 也就是 col-2
如果是12列布局 那么就把1列合并 也就是 col-1
通过媒体查询 加不同前缀
超小 xs
小屏幕 sm
中屏幕 md
大屏幕 lg
/* 超小屏 */
@media (max-width: 768px) {
/* 一行12个 每份占1/12 */
.col-xs-1 {
width: 8.333%;
}
/* 一行6个 每份占2/12 */
.col-xs-2 {
width: 16.662%;
}
/* 一行4个 每份占3/12 */
.col-xs-3 {
width: 25%;
}
/* 一行3个 每份占4/12 */
.col-xs-4 {
width: 33.333%;
}
/* 一行2个 每份占6/12 */
.col-xs-6 {
width: 50%;
}
.col-xs-8 {
width: 66.667%;
}
/* 一行1个 每份占12/12 */
.col-xs-12 {
width: 100%;
}
}
/* 小屏 */
@media (min-width: 768px) and (max-width: 992px) {
.col-sm-1 {
width: 8.333%;
}
.col-sm-2 {
width: 16.662%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-8 {
width: 66.667%;
}
.col-sm-12 {
width: 100%;
}
}
/* 中屏 */
@media (min-width: 992px) and (max-width: 1200px) {
.col-md-1 {
width: 8.333%;
}
.col-md-2 {
width: 16.662%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.333%;
}
.col-md-6 {
width: 50%;
}
.col-md-8 {
width: 66.667%;
}
.col-md-12 {
width: 100%;
}
}
/* 大屏 */
@media (min-width: 1200px) {
.col-lg-1 {
width: 8.333%;
}
.col-lg-2 {
width: 16.662%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-8 {
width: 66.667%;
}
.col-lg-12 {
width: 100%;
}
}
本文地址：https://blog.csdn.net/linglingzi001/article/details/107204087
如对本文有疑问， 点击进行留言回复！！
网友评论