2023-04-04

4.3响应式布局、bootstrap

一、响应式布局

能够根据设备宽度的变化,设置差异化样式

在不同宽度的视口下不同的布局方式

@media(媒体特性){

    选择器{

  样式

      }

}

用以上的方式添加max-width  、  min-width设置在一定范围内的不同样式

书写顺序:min-width(从小到大)

max-width(从大到小)

完整的写法  区间  中间用and连接

备注:连写的两个数值一定要有区间  不能是空集  不然就会值显示  后面那个属性值

引入差异化  media属性加上一个筛选条件"逻辑符  媒体型 and (媒体特性)"

二、bootstrap

1、ui框架的作用(兼容性高)

优点:基于框架开发,效率高,稳定性高

2、bootstrap框架快速开发响应式网页

备注:引入后需要用相同类名

3、bootstrap3栅格系统布局响应式网页

栅格化是指将整个网页的宽度分成若干等份

默认把网页宽度分成12等分

栅格化是指将整个网页的宽度分成若干等份

*代表在12分中所占的数量多少  比如三分之一就是4四分之一就是3  二分之一是6 以此类推

4、细读bootstrap网站使用手册里面有大量的css格式、插件、组件等按要求使用并引入就行。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • rem布局 1.rem单位 2.媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 2.3 媒体查询+re...
    Scincyc阅读 5,718评论 0 0
  • 网页布局方法总结: 目前已经学习了两种布局方式:固定宽度布局:常见于PC端,设定固定的宽度作为版心来布局流式布局:...
    印象rcj阅读 2,860评论 0 1
  • 响应式 一、媒体查询 开发常用写法媒体特性常用写法 max-width min-width 1 书写顺序 目标:能...
    七月流雪阅读 1,176评论 0 1
  • CSS:全称Cascading Style Sheets(层叠样式表) CSS 规则由两个主要部分构成,选择器(给...
    张_何阅读 1,352评论 0 0
  • 本文目录: 1.媒体查询的概念 2.媒体查询的常用写法 3.栅格系统 4.响应式工具 1.媒体查询的概念 媒体指的...
    前端辉羽阅读 4,736评论 0 8