移动端web总结（二）——微金所项目总结

tech2023-08-20 93

移动端微金所项目知识点总结

1，媒体查询：使用媒体查询能针对不同屏幕区间设置不同的布局和样式

语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}

//1. 超小屏设备 768px以下 @media screen and (max-width: 768px) { } //2. 小屏设备 768px-992px @media screen and (min-width: 768px) and (max-width: 992px) { } //3. 中屏设备 992px-1200px @media screen and (min-width: 992px) and (max-width: 1200px) { } //4. 大屏设备 1200px以上 @media screen and (min-width: 1200px) { }

1.1 媒体查询的其他写法扩展(可以省略 screen )

div {background: green;} @media (min-width: 768px) { div {background: yellow;} } @media (min-width: 992px) { div {background: blue;} } @media (min-width: 1200px) { div {background: red;} }

以上写法也能够实现：超小屏设备 768px以下，div为绿色；小屏设备 768px-992px，div为黄色；中屏设备 992px-1200px，div为蓝色；大屏设备 1200px以上，div为红色。

2，使用bootstrap的基本模板

<!DOCTYPE html>  <html lang="zh-CN"> <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, inicial-scale=1.0, user-scalable=0">   <title>基本模板</title>  <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">      </head> <body> 内容  <script src="../lib/jquery/jquery.min.js"></script>  <script src="../lib/bootstrap/js/bootstrap.min.js"></script> </body> </html>

3，normalize.css 插件的作用：增强不同浏览器的默认样式道的表现一致性

normalize.css 与自己写的 reset.css（重置样式）的区别：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素。

共同点：都是重置样式库，增强浏览器的表现一致性不同点：举个例子：ul reset.css list-style:none —— 因为需求 normalize.css 不会重置ul样式 —— 本身已经在每个浏览器表现一致的元素

4，bootstrap的基本样式

类名 container 表示容器为响应式容器：（默认有15px的左右内边距）在超小屏设备的时候（768px以下），当前容器的宽度100%在小屏设备的时候（768px-992px），当前容器的宽度750px居中在中屏设备的时候（992px-1200px），当前容器的宽度970px居中在大屏设备的时候（1200px以上），当前容器的宽度1170px居中类名 container-fluid 表示容器为响应式容器：容器的宽度始终100%。（默认有15px的左右内边距）

5，栅格系统：

行和列的网格状布局，类名 row 表示行，类名 col-#-# 表示列，#代表不确定（参数）。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为“行（row）”的直接子元素。

col-#-#：列样式-第一个’#’：屏幕的大小大屏设备 lg 大屏设备以上生效包含本身中屏设备 md 中屏设备以上生效包含本身（包括大中屏）小屏设备 sm 小屏设备以上生效包含本身（包括大中小屏）超小屏设备 xs 超小屏设备以上生效包含本身（包括大中小和超小屏）第二个’#’：每一行的分等份，默认分成12等份，数字代表的是占多少份（设置超过12则不生效） <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div>

6，栅格系统扩展功能（栅格系统都是默认向左对齐的，行和列都有15px的左右内边距）

栅格嵌套 (内层的行和列通过左右外边距设为-15px 使得内层栅格填充满外层栅格，解除外层栅格15px的左右内边距) <div class="col-xs-4"> <div class="row"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> </div> 列的偏移：offset 向右偏移多少等分 <div class="col-xs-4"> <div class="row"> <div class="col-xs-3"></div> <div class="col-xs-6 col-xs-offset-1"></div> </div> </div> 列的排序：push–往后推；pull–往前拉 <div class="col-xs-4"> <div class="row"> <div class="col-xs-3 col-xs-push-9">col-xs-3</div> <div class="col-xs-9 col-xs-pull-3">col-xs-9</div> </div> </div> 列的偏移(offset) 与列的排序(push) 的区别偏移的底层思想是使用 margin-left，使用偏移的列会强制其他列移动排序(push)的底层思想是使用定位，使用排序的列不会影响其他列的位置，列与列之间可以重叠

7，响应式工具：显示与隐藏

例如有如下需求：大屏设备显示；中屏设备隐藏；小屏设备显示；超小屏设备隐藏。设置元素显示的类样式 visible-lg 大屏显示其他隐藏 visible-md visible-sm visible-xs 设置元素隐藏的类样式（3.2版本以后，建议使用hidden，不建议使用visible） hidden-lg 大屏隐藏其他显示 hidden-md hidden-sm hidden-xs

8，+,~选择器：

‘+’: 紧邻的下一个兄弟元素 ‘~’: 后面所有的兄弟元素

9，使用bootstrap组件的思路：

遇到比较通用的模块（导航条、轮播图）先考虑bootstrap中有没有类似的组件和插件找到插件或组件的失示例后，先分析HTML代码的结构，哪一个模块对应哪部分根据自己的结构需求调整好html元素开始修改样式，有的元素的样式完全自己写，一些需要覆盖的bootstrap的css样式，就可以根据该组件顶层的样式，点进bootstrap.css文件中，将其样式下的所有样式代码拷贝在自己的css文件中，进行修改覆盖。这样可以避免自己重写样式时，由于选择器的层级不够高而导致的无法覆盖原始bootstrap中css样式的问题。一些特殊属性可以省略： - aria-expanded=“false”（默认不展开） aria-* 代表提供给屏幕阅读器使用的（盲人阅读器） - class=“sr-only” screen read only 代表提供给屏幕阅读器使用的（盲人阅读器） - roleh属性也是提供给屏幕阅读器使用的（盲人阅读器）

10，collapse组件

切换按钮：

属性： data-toggle=“collapse” 申明是什么组件=折叠组件 data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器如果用a标签作为切换按钮，data-target 的值可以直接赋给a的href属性，能够实现相同的效果

11，响应式轮播图的思路

要求： 1. 小屏、中屏和大屏下，轮播图的高度固定，宽度自适应 2. 超小屏下，轮播图宽度自适应，高度随宽度的变化而进行缩放实现： 1. 小屏、中屏和大屏下，设置一个div，宽度100%，高度固定，为其设置用于轮播的背景图，设置background-repeat=no-repeat; background-position=center; background-size=cover; 2. 超小屏下，直接放img图片，设置图片的 width=100%; height=auto;

12，使用art-template模板引擎利用后台数据进行异步渲染的步骤：

html中：（利用script标签作为模板，用来接收js中template方法传来的参数，并生成html结构作为js中template方法的返回值） <script type="text/template" id="pointTemplate"> <% for(var i=0;i<list.length;i++){ %> <li data-index="<%=i%>" class="<%=i==0?'active':''%>">内容</li> <% } %> </script> JS中：（template方法的第一个参数表示html中对应的script标签的ID值，第二个参数必须是花括号形式的对象参数） // 这里由于data是[]形式的数组对象，所以需要给它加个键名与其本身组合成一个花括号形式的对象，然后才能传值 var pointHtml=template("pointTemplate",{list:data});//返回值为利用数据生成的html结构 $(".carousel-indicators").html(pointHtml);// 将生成的html结构加入到页面对应的位置，并进行渲染

13，json格式的字符串与json对象的区别

json是一种特殊结构的字符串，其本质是字符串，是一种轻量级文本数据交换格式。它的格式非常严格，以冒号为键值对，中括号为数组，花括号为对象，属性名称必须加引号，且是双引号，字符串必须是双引号，数字的字符串可以省略，最后一个键值对必须没有逗号。而json对象（就是JS中的对象），是一种特殊格式的数据类型，且格式要求比json格式的字符串的格式要求宽松的多。JS中存在json到js对象的转换： var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 var obj = JSON.parse(str); //由JSON字符串转换为JSON对象也存在js对象到json的转换： var last=obj.toJSONString(); //将JSON对象转化为JSON字符 var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

14，新学到的选择器： :nth-of-type(n)、:first-of-type 和 :last-of-type

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，其中 n 可以是数字、关键词（odd/even）或公式。而 :nth-child() 选择器，该选择器选取该元素的父元素的第 N 个子元素，与类型无关，找到后再判断类型是否匹配(如果第 N 个子元素不是这个类型，这个选择器就是无效选择器)。p:first-of-type 选择每个p元素是其父级的第一个p元素p:last-of-type 选择每个p元素是其父级的最后一个p元素p:nth-last-of-type(n) 选择每个p元素是其父级的倒数第N个p元素

15，复习jQuery获取宽度相关的API

width() 内容 innerWidth() 内容+内边距 outerWidth() 内容+内边距+边框 outerWidth(true) 内容+内边距+边框+外边距

16，自己实现触摸滑动效果，或者使用插件（iscroll.js）实现某个元素内的触摸滑动效果时，最好先使用e.preventDefault()清除掉移动设备的touchmove事件的默认页面滑动效果。

17，复习box-shadow属性（box-shadow: 0 0 10px 10px hotpink inset;）

参数1：x轴的偏移参数2：y轴的偏移参数3：阴影的模糊宽度（颜色过渡的宽度）参数4：阴影的延伸（设置的颜色增加多少宽度）参数5：阴影的颜色参数6：内阴影（向内延伸和过渡）

最新回复(0)