主页

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的

设备划分 尺寸区间
超小屏幕(手机) <768px
小屏设备(平板) >=768px ~ <992px
中等屏幕(桌面显示器) >=992px ~ <1200px
宽屏设备(大桌面显示器) >=1200px

响应式布局容器

响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,在改变里面子元素的排列方式和大小,从而实现不同屏幕,看到不同的布局和样式变化

常见的响应式尺寸划分

  • 超小屏幕(手机,小于768px):设置宽度为100%
  • 小屏幕(平板,大于等于768px):设置宽度为750px
  • 中等屏幕(桌面显示器,大于等于992px):宽度设置为970px
  • 大屏幕(大桌面显示器,大于等于1200px):宽度设置为1170px

     .container {
         height: 300px;
         margin: 0 auto;
         background-color: red;
     }
     /* 超小屏幕下 小于768 布局容器宽度为100% */
     @media screen and (max-width: 767px) {
         .container {
             width: 100%;
         }
     }
     /* 小屏幕下 大于等于768 布局容器宽度为750px */
     @media screen and (min-width: 768px) {
         .container {
             width: 750px;
         }
     }
     /* 中等屏幕下 大于等于992px 布局容器宽度为970px */
     @media screen and (min-width: 992px) {
         .container {
             width: 970px;
         }
     }
     /* 大屏幕下 大于等于1200px 布局容器宽度为1170px */
     @media screen and (min-width: 1200px) {
         .container {
             width: 1170px;
         }
     }

响应式

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0

目录

来自 《响应式开发》
评论

qiaofugui

博主很懒,啥都没有
188 文章数
14 评论量
3 分类数
191 页面数
已在风雨中度过 2年133天2小时22分