2020.8.20-易科

手写响应式

移动端响应式,需要设置视口

在head标签中添加:

属性及属性值:width=device-width、initial-scale=1、minimum-scale=1、maximum-scale=1、user-scalable=0

媒体查询

@media screen and (min-width:1200px) { 选择器{ 样式代码 } };@media screen and (min-width:992px) and (max-width:1199px){ 选择器{ 样式代码 } };@media screen and (min-width:768px) and (max-width:991px){ 选择器{ 样式代码 } };@media screen and (min-width:576px) and (max-width:767px) { 选择器{ 样式代码 } };@media screen and (max-width:575px) { 选择器{ 样式代码 } }

常用设备关键字:screen;print;speech;all

定位(float面试、相对定位+绝对定位、默认流)

响应式网页的构成

  1. 流式布局(默认文档流+浮动)

  2. 文字和图片的大小随着容器的大小而改变

  3. 使用CSS3提供的媒体查询技术

栅格布局

1.web网页布局方式:table布局、div+css布局、boot中的栅格

2.栅格的使用:父级要写:.row>>>>当前元素使用栅格布局,当前行被分为相等的12份,主轴为x轴的弹性布局,起点在左侧,可换行,左右为15px外边距

子元素要写:.col-n>>>>设置了子元素的最大宽度,一个col在row中占几份col-n,左右15内边距,n为1~12

3.响应式栅格布局

.col-n、.col-sm-n、.col-md-n、.col-lg-n、.col-xl-n

4.列偏移

offset-n、响应式列偏移

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1