基础适配器、栅格系统

小橙子*

已于 2022-09-16 21:21:39 修改

阅读量123

点赞数

分类专栏：前端文章标签： css html css3

于 2022-09-06 22:22:04 首次发布

本文链接：https://blog.csdn.net/m0_62091240/article/details/126735287

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、视口适配

1、 rem

（1）网页的根是HTML标签的字号（根标签字号） 1rem=1HMTL字号大小

（2）媒体查询和移动适配

@media (媒体特性){
	选择器{
		css属性
	}
}

例：
@media (width:375px){
	html{
		font-size:37.5px;
	}
}
.box{
	width:5rem;
	height:3rem;
	background-color:pink;
}

（3）适配原理

HTML标签字号根据设计稿-》确定设备宽度-》确定基准根字号（1rem =1/10 视口宽度）

rem单位尺寸=px单位数值 / 基准根字号

2、LESS语法快速编译生成CSS代码

（1）less是一个预处理器，less文件后缀是 .less

（2）注释：单行（编译以后不会出现在.css里面，.css文件不识别单行）

快级注释（编译以后会出现在.css里面）

（3）计算 :加减乘除（除法需要添加小括号）

（4）嵌套：可以生成后代选择器

.父级选择器{
	//父级样式
	.子级选择器{
		//子级样式
	}
}

（5）变量：可定义成变量方便使用：

定义：@变量名:值 ; 使用：CSS属性：@变量名；

（6）导入： @import ’文件路径‘；可以省略 .less后缀名

（7）导出：可在 .less文件上方添加路径 : //out: ./

(8) 禁止导出： .less文件上方 //out: false

这时需要使用这个文件在另一个文件导入即可

3、vw / vh

(1) vw: viewport width 1vw = 1/100视口宽度

(2) vh : viewport height 1vh = 1/100视口宽度

补充：获取网页素材

F12–》使用选择 —》点击需要素材右键检查—》选中

找样式 —》右键 Open in new tab 复制地址放到新标签中回车会自动下载；样式全篇复制放到iconfont.css中

二、响应式网页

1、媒体查询

（1）基本用法 max-width || min-width 规定视口宽度的响应式显示

/* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width:768px) {
            body{
                background-color: pink;
            }
        }
/* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width:1200px) {
            body{
               background-color: skyblue;
            }
        }

（2）书写顺序（css属性都有层叠性）

min-width（从小到大）
max-width（从大到小）

（3）了解完整写法

@media 关键词媒体类型 and ( 媒体特性) { CSS代码}

关键词：and 、only 、not

媒体类型：

（4）link写法(外链式CSS引入)

<link rel="stylesheet" media="逻辑符媒体类型 and (媒体特性)" href="xx.css">

<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
<!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
<link rel="stylesheet" href="./one.css" media="(min-width:992px)">    
<link rel="stylesheet" href="./two.css" media="(min-width:1200px">

（5）隐藏

/* 如果检测到视口宽度小于768px，认为是手机端，left隐藏 */
        @media (max-width:768px) {
            .left{
                display: none;
            }
        }

2、BootStrap（UI框架，开发响应式页面）

（1）Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构及JavaScript ,快速编写功能完善的网页及常见交互效果。

（2）下载：首页→BootStrap3中文文档→下载BootStrap

（3）使用

（4）栅格系统-- **布局**响应式网页

原理

栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成==12等份==

响应断点、类前缀记一下

代码

 <!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
 <!--  col-类前缀-份儿数 -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>

其他类名
- .container是Bootstrap中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
- .container-fluid也是Bootstrap中专门]提供的类名,所有应用该类名的盒子,宽度均为100%。
- 分别使用row类名和.col类名定义栅格布局的行和列。
注意：
1. container类自带间距15px;
2. row类自带间距-15px

<!-- 版心样式:自带左右各15px的padding -->
    <div class="container">1</div>

<!-- row类作用就是抵消container类的15px的内边距，row有 -15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>
    
<!-- 宽度100%:自带左右各15px的padding -->
    <div class="container-fluid">3</div>

（5）BootStrap介绍

全局样式

手册用法:
BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点。
网站首页->Bootstrap3中文文档 ->全局css样式 ->按*分类导航查找目标类
组件

BootStrap提供的常见功能,包含了HTML结构和CSS样式。

使用：引入BootStrap样式复制结构,修改内容
字体图标

HTML页面引入BootStrap样式文件
空标签调用对应类名
➢glyphicon
➢图标类
插件

BootStrap提供的常见效果包含了HTML结构, CSS样式与JavaScript

复制HTML结构，并适当调整结构或内容

注意：引入js的顺序