移动web和响应式网页

瞳眬

于 2024-08-04 12:51:36 发布

阅读量304

点赞数 9

分类专栏：前端开发文章标签：前端

本文链接：https://blog.csdn.net/2301_79614134/article/details/140903878

版权

11 篇文章 0 订阅

订阅专栏

一、移动web

概念：设计稿里面每个元素的尺寸的倍数
作用：防止图片在高分辨率屏幕下模糊失真

注意
vm和vh不能混合使用

/* 当某个条件成立, 执行对应的CSS样式 */
@media (width:200px) {
  html {
    background-color: red;
  }
}
/*
@media (条件) {
  选择器 {
    CSS样式
  }
}
*/

外部CSS

<link rel="stylesheet" media="(条件)" href="style.css">

<body>
  ......
  <script src="./js/flexible.js"></script>
</body>

下载less插件

（1）less-运算

div {
	width: 100 + 10px;
	widtg: 100 * 10px;
	/* 除法需要添加“小括号” 或 “.” */
	width: (100 / 10px);
	width: 100 ./ 10px;
}

（2）less-嵌套

div {
	color: red;
    p {
    	width: 100px;
    }
}
/* 快速生成后代选择器
父级选择器 {
	父级样式
    子级选择器 {
    	子级样式
    }
}
*/

注意
& 表示当前选择器
（3）less-变量

/* 定义变量 */
@myColor: red;

/* 使用变量 */
div {
	color: @myColor;
}

作用：方便修改和使用
（4）less-导入

@import './1.less';
/* 如果时less文件可以省略后缀 */
@import './1';

（5）less-导出

/* 在 less 文件的第一行添加 [ // out: 存储URL ] */ 
// out: ./1.css
/* 文件夹名称后面添加 [ / ] */
// out: ./css/
/* 禁止导出 */
// out: false

注意
导出时要在第一行添加

下载 Bootstrap 生产文件

引入Bootstrap文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

下载字体图标 bootstrap-icons-1.X.X.zip
使用：

<i class="bi-android2"></i>

关注

专栏目录