JavaScript-HTML-CSS Day13 Notes

1、屏幕分辨率的理解

结论：不管是电脑，还是移动设备，只要是屏幕都有逻辑分辨率和物理分辨率 这两种分辨率。

写代码的时候，参考的是逻辑分辨率。

 

2、关于视口标签的作用

视口标签：

规定HTML的尺寸，让HTML的宽度 =  逻辑分辨率的宽度/(or)设备的宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码认识、不去删它不去碰它就行了。

 

 

3、关于二倍图，需要了解的

在目前这个年代，设计师都是参照iPhone6/7/8这几款手机出设计稿，

这款手机的逻辑分辨率是375像素，也就是网页的尺寸，这就意味着一倍图的尺寸宽应该是375

则二倍图的尺寸宽应该是750，

 

 

 

 

4、PC端和移动端适配方案

PC端用的是：宽度自适应

移动端用的是：等比自适应

 

5、rem和vm两种适应方案的全称是什么？

在CSS中，rem和vw的适配方案的全称分别是：

  • rem：根元素字体大小（Root Em Unit）单位，它相对于根元素（通常是<html>）的字体大小。适用于响应式布局，通过改变根元素的字体大小可以实现整体缩放。

  • vw：视口宽度（Viewport Width）单位，它相对于视口的宽度的1%。适用于根据视口大小调整元素的宽度和布局，适合响应式设计。

这两个单位常用于实现响应式布局，确保在不同屏幕尺寸下，元素能够自适应调整。

它们都是相对单位，em 是相对于当前元素的字体大小，而 rem 是相对于根元素的字体大小。

 

 6、手机屏幕不同时，怎么把HTML字号设置为不一样的呢？

使用：媒体查询 即可解决

 

 

7、设备宽度不同时候，HTML标签字号的具体设置问题。

 

具体操作步骤：

  • 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号。
  • 2. 使用rem单位书写尺寸。

但是在真正的工作中，不可能遇到一个不同屏幕尺寸，就写一个媒体查询，这样显然是不方便，而且不具有通用性。

真正的操作是如下，用一个专门的.js来处理。

这个JS引入的位置要注意，写在body标签结尾前紧挨着的上方即可。

 

8、rem和px之间的转化，和计算要点

转化公式： rem单位的尺寸 = px单位数值 / 基准根字号

因为设计稿一般是像素px单位，

而rem是适配移动端的【基准根字号】，所以就会涉及转化计算问题。

 

9. less的概念和作用理解

通俗的解释: 就是拓展了CSS中的计算问题, 不需要再去手动按计算器去计算, 直接在less中写语言即可.

 

 

 10. less和css之间注释部分, 需要注意的点

  • CSS是不支持 // 单行注释, 只支持块注释, 看下图即懂.
  • 开发代码是给开发者看的, 但是CSS代码是给浏览器看的, 所以有没有注释其实没无伤大雅.

 

11. less的嵌套写法

& 符号的作用理解

这样的好处是，有时候方便一下全部迁移该部分代码，而不会遗漏。

不然一般通常写法：a {...}  接着 a:hover{...} 这种写法，迁移的时候要同时分开复制两部分代码，

有时候代码一多，往往就容易发生遗漏。

 

 12. less - 变量 的理解

 

13. 像这种flexible.js文件，一般是去哪里下载？

 

像这种 flexible.js 文件，通常是与响应式设计相关的工具脚本，它用来动态调整页面的 rem 单位，以便适配不同设备的屏幕宽度，常用于移动端开发。类似的文件通常不是从官方标准库直接下载的，而是从一些前端开发框架、工具库或者开源项目中找到。

可以从以下几种渠道获取类似的 flexible.js 文件：

  1. GitHub 仓库：很多开源项目会发布类似的工具库。你可以通过 GitHub 搜索关键词，比如 "flexible.js" 或 "rem responsive design" 来找到适用的代码或项目。例如，amfe-flexible 是阿里团队开发的一个知名的 flexible 库。

  2. CDN 库：许多 JavaScript 库会通过 CDN 提供服务。你可以通过一些流行的 CDN 网站（如 jsDelivr 或 unpkg）直接引用已有的 flexible 脚本。

  3. npm 或 yarn：如果你使用 npm 或 yarn 管理前端项目，你可以通过这些包管理工具安装相关的库。

    • 安装命令：
npm install amfe-flexible

然后在项目中引入：

import 'amfe-flexible';

　　4.前端框架或脚手架：有些前端框架会内置 flexible.js 功能，尤其是一些专门为移动端设计的框架或脚手架工具，如 Vant、WeUI 等。如果你使用这些工具，有时它们的文档会提供下载链接或直接引用方法。

通过这些途径，你可以方便地获取和使用类似的 flexible.js 脚本，帮助处理移动端页面的响应式布局问题。

 

14. 现在就是要写width, 那为什么我现在如下代码这样写，在chrome的网页打开移动端，用的iphone 6/7/8还是不能够显示绿色背景色呢？

之后细究下

 

15. 在vscode中，如下注释的快捷键分别是什么？

// 单行注释

/* 
  这是块注释
  允许换行
*/

在 VSCode 中，使用快捷键可以快速添加单行注释和块注释。具体快捷键如下：

1. 单行注释 (//)

  • Windows / Linux: Ctrl + /
  • Mac: Cmd + /

这个快捷键会在当前光标所在行或选中的多行的每一行前添加 //。

2. 块注释 (/* */)

  • Windows / Linux: Shift + Alt + A
  • Mac: Shift + Option + A

这个快捷键会将选中的代码块用 /* */ 包围，生成块注释。

总结：

  • 单行注释: Ctrl + / (Windows/Linux), Cmd + / (Mac)
  • 块注释: Shift + Alt + A (Windows/Linux), Shift + Option + A (Mac)

 

posted @ 2024-09-30 15:00  AlphaGeek  阅读(14)  评论(0)    收藏  举报