1、移动端布局
——移动端的特点
手机屏幕小,一般的宽度直接设置为100%,不需要固定版心
-
分辨率
屏幕的尺寸:指的是对角线的长度,一般用英寸来测量
PC分辨率:1920*1080 指代的是电脑屏幕能排列像素点的个数(分为物理分辨率和逻辑分辨率)
编写代码参照的是逻辑分辨率
——视口
使用meta标签设置视口的宽度,制作适配不同设备的网页
// 新建html代码时候自动生成,使得网页的宽度等于逻辑分辨率的尺寸
// 如果没有视口标签,网页的宽度是980px
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// pc端也有视口的概念,但是pc端视口默认就是和屏幕分辨率大小一致,不需要进行处理
——二倍图
为了高分辨率下图片不会失真,设计师一般设计750px的图
使用像素大厨软件切换到二倍图下进行测量尺寸
——百分比布局
也可以叫做流式布局
效果:宽度自适应、高度固定(以前的布局方案)
——Flex布局
1、浮动布局会产生脱标的问题,flex布局则不会产生这类问题,非常适合结构化布局
- flex布局是浏览器提倡的布局模型
- 布局网页更加简单、灵活
- 避免浮动脱标的问题
2、使用方式:
- 父元素添加display:flex,子元素可以自动挤压或拉伸
组成部分:
- 弹性容器、弹性盒子、主轴(默认水平)、侧轴/交叉轴(默认垂直)
3、排列方式:
-
默认情况下:主轴默认水平方向,弹性盒子按照主轴方向排列
-
主轴对齐方式:
justify-content调节弹性盒子在主轴的对齐方式 // 属性值 flex-start // 起点开始依次排列(默认值) flex-end // 终点开始依次排列 center // 沿主轴居中排列,盒子中间无间距 space-around // 间距添加在盒子两侧,盒子之间间距是盒子与容器间距的两倍 space-between // 弹性盒子沿主轴均匀排列,间距在盒子之间,两侧无间距 space-evenly // 弹性盒子沿主轴均匀排列,所有间距相等
-
侧轴对齐方式
align-items调节“所有弹性盒子”在侧轴的对齐方式 // 属性值 flex-start // 默认值,起点位置依次排列 flex-end // 终点开始依次排列 center // 沿侧轴居中排列 stretch // 拉伸弹性盒子等于弹性容器(默认值,前提是弹性盒子没有高度)
-
上边两种都是添加到弹性容器上的属性,align-self添加到弹性元素身上
align-self控制“某个单独的弹性盒子”在侧轴的对齐方式 // 属性值与align-items相同
4、弹性盒子尺寸的特点:
- 若是弹性盒子没有高度,且aligh-items为默认值(拉伸),高度就会是弹性容器高度
- 若是弹性盒子没有宽度,弹性容器宽度按照内容的多少进行改变
5、伸缩比(伸缩比属性是添加给弹性盒子的)
- 使用flex属性修改弹性盒子伸缩比(flex表示占用弹性容器剩余尺寸的份数)
6、修改主轴方向
-
主轴默认在水平方向,使用flex-direction改变弹性盒子的主轴方向,实现内容垂直排列
// 属性 row // 行,水平(默认值) column // 列,垂直 row-reverse // 行,水平,从右向左 column-reverse // 列,垂直,从下往上
7、弹性盒子的换行
使用flex-wrap实现弹性盒子多行排列效果
flex布局模型默认是不会换行的,弹性盒子可以自由伸缩,所有的弹性盒子缩放后在一行显示
// 属性
nowrap // 默认值,不换行
wrap // 换行
8、调整行的对齐方式
使用align-content调整行的对齐方式
// 属性值与justify-content基本一致,但是没有space-evenly属性
// 默认值是space-between
2、移动适配
移动适配指的是页面元素的宽度随着设备宽度发生动态变化
——rem解决方案
1、rem
目标:能够使用rem单位设置网页元素的尺寸
- rem是一个相对单位
- 相对于html标签自号计算尺寸
- 1rem = 1HTML字号大小
使用:使用时候先设置html字号大小,宽高=rem * font-size
如何动态设置不一样的字号大小:
使用媒体查询
设备不同字体大小设置多少合适:
在rem方案中,默认将网页分成10等份。字号设置为视口宽度的1/10
2、媒体查询
媒体查询能够检测视口宽度,设置差异化css样式
@media (媒体特征) {
选择器 {
css属性
}
}
// 例如
@media (width: 320px) {
html {
font-size: 32px
}
}
这样写只能适配单个的屏幕大小,所以可以使用flexible.js适配移动端框架
3、flexible.js
原理:根据不同的视口宽度给网页中的根节点设置不同的字体大小
使用:将js文件引入后便可以实现适配效果,可以使用rem单位
4、less的使用
less是一个css的预处理器,可以使得css具备一定的逻辑和计算能力
-
因为rem需要进行计算,但是css不支持计算写法,所以可以使用less进行预处理
-
注意:浏览器不识别less文件,编写的是less文件网页引入的还是css文件
-
注释
- 双斜线——单行注释(Ctrl + /)
单行注释无法生成到css中
- / 注释内容 /——块注释(Shift + Alt + A)
-
计算
- 加减乘直接书写计算表达式
- 除法需要添加括号,或者在 “ / ” 之前加一个点
-
less嵌套
-
为了快速生成后代选择器,less支持选择器的嵌套
-
& 不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用
-
-
变量
- 网页文字颜色一般都是一致的,所以可以定义一个颜色变量,在其他地方调用
- 作用:存储数据、方便使用和修改
- 定义变量:@变量名:值
- 使用变量:css属性:@变量名
-
less文件支持导入语法
- @import "文件路径"; 一般都添加在less文件的开头位置
可以将ess文件内容导入(如果导入的是less文件,可以省略后缀)
-
使用less语法导出css文件
-
css默认导出在less同级目录,可以通过导出自定义导出位置
-
方法一:配置插件
// settings.json配置文件 "less.compile": { "out": "../css/", }
-
方法二:书写导出代码
// less文件首行添加单行注释 添加:"// out: ../css/" // 可以将css导出到与less文件夹同级的css文件夹中 //css后还可以指定导出文件名
// 有的less文件需要被其他less文件引入,不需要导出css 添加:"// out: false"
-
——vw/vh,未来的解决方案
使用vh/vw元素设置网页元素的尺寸
- 相对单位,相对视口尺寸计算元素尺寸
- 单位全名:viewport width / viewport height
- 1vw = 1 / 100视口宽度,vh = 1 / 100视口高度
设置盒子宽高时候,可以使用vh,也可以使用vw
- 如果进行了混用:
- 部分手机存在全面屏,宽度相同,但是全面屏高度会大一些,混合使用会造成宽高比例不同
——vw/vh和rem相同点
1、rem
元素的像素大小 / 页面字体大小(视口宽度/10)= rem的值
2、vh / vw
元素像素大小 / 每vw(vh)的像素大小 = vh(vw)的值
3、响应式
——媒体查询
与移动适配媒体查询不同,响应式中媒体特性不会检测视口准确宽度,而是检测宽度范围
-
max-width(小于等于某一宽度)
// 视口宽度小于等于800px时背景色为粉色 @media (max-width:800px) { body { background-color: pink } }
-
min-width(大于等于某一宽度)
// 大于768==> 粉色 // 大于992==> 绿色 // 大于1200==>天蓝色 @media (min-width:768px) { body { background-color: pink } } @media (min-width:992px) { body { background-color: green } } @media (min-width:1200px) { body { background-color: skyblue } } 媒体查询本质上仍是css,具有层叠性。大于768的全部设置为粉色,大于992的样式将粉色层叠掉,实现只有768~991设置粉色 // 所以,以上代码如果不按顺序书写,失去层叠作用,无法实现响应式效果
所以可以发现,min-width从小到大写,max-width从大到小写
-
媒体查询完整写法(了解)
@media 关键词 媒体类型 and (媒体特性) {css样式}
——关键词- and(多个媒体特性,用and连接)
- only(只有一个媒体特性)
- not(非,判断不是某个条件)
——媒体类型
- screen(带屏幕的设备)
- print(打印预览模式)
- speech(屏幕阅读模式)
- all(默认值,包括以上三种情形)
——媒体特征
- width、height(视口的宽高)
- max-width、max-height(视口最大宽高)
- min-width、min-height(视口最小宽高)
- orientation(屏幕方向)
- portrait(竖屏)
- landscape(横屏)
-
外链引入媒体查询css
// 一般只使用媒体特性 // 外链引入媒体查询属性可以使特定情况下样式生效 // 注意:媒体特性必须添加括号
——BootStrap
使用BootStrap框架开发响应式网页
1、样式使用
- 引入boootstrap.css样式表
- 使用样式中定义的类名
2、插件的使用
- 引入jquery.js
- 引入框架js文件(bootstrap.min.js)
- 使用框架插件
2、官方文档
[BootStrap中文文档](Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com))
文章评论