移动端笔记

于 2023-03-01 16:01:37 发布
阅读量580 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端 web移动端 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sokoooo/article/details/129228882
版权

目录

一、移动端基础

二、视口

三、二倍图/多倍图

四、移动端开发

（一）开发选择

（二）常见布局

（三）移动端技术解决方案

五、移动WEB开发之flex布局

六、移动WEB开发之rem适配布局

#END（具体可观看b站pink老师css后续移动端视频）

​​​​​​​

一、移动端基础

1. 移动端浏览器主要用于对webkit内核进行兼容；

2. 内核：

（1） Webkit：一个开源的浏览器引擎，该引擎由苹果公司开发，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。

（2）Trident：又称为IE内核，采用Trident内核的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等。

（3） Gecko：又称为Firefox内核，同时Gecko是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

（4） Blink：由Google和Opera Software开发的浏览器排版引擎，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

3. 目前移动端开发针对于手机端；

4. 移动端碎片化较严重（原因：分辨率和屏幕尺寸大小不同）。

二、视口

1. 概念：浏览器显示页面内容的屏幕区域；

2. 分类：布局视口、视觉视口、理想视口；

3. 布局视口（layout viewport）（不适合页面开发）

（1）移动设备的浏览器一般都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

*iOS,Android基本能将视口分辨率设置为980px，可手动缩放网页。

4. 视觉视口（visual viewport）

（1）用户所正在看的网站的区域；

（2）可通过缩放操作视觉视口，但不会影响布局视口（即布局视口仍保持原本的宽度）。

5. 理想视口（ideal viewport）

（1）为了使网站在移动端有最理想的浏览和阅读宽度而设定，对设备来讲，是最理想的视口尺寸；

（2）需要手动添写meta视口标签；

（3）采用理想视口的主要目的是让我们的设备与布局视口宽度一致。

6. meta视口标签

（1）标准的viewport设置

① 视口宽度和设备保持一致

② 视口的默认缩放比例1.0

③ 不允许用户自行缩放

④ 最大允许的缩放比例1.0

⑤ 最小允许的缩放比例1.0

（2）写法：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

三、二倍图/多倍图

*二倍精灵图做法：

1. 在firework（一个软件）中将精灵图等比例缩放为原来的一半；

2. 根据大小测量坐标；

3. 代码设置为background-sizes：精灵图原本宽度的一半。

*图片格式：

1. 实质：将准备的图片比实际需要的尺寸大小大两倍；

2. 物理像素&物理像素比

（1）物理像素点：屏幕显示的最小颗粒，是物理真实存在的（即分辨率）；

（2）开发时的1px不一定等于1个物理像素，PC端页面1px等于1个物理像素；

（3）一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

（4）Retina（视网膜屏幕）：一种显示技术，可以将更多的物理像素点压缩至一块屏幕中从而达到更高的分辨率，并提高屏幕显示的细腻程度。

举例：iPhone8中为750像素点，但宽度375px的盒子将其占满，1px=2像素点，物理像素比为2，其中375×667为开发尺寸(px)。

3. 多倍图目的

（1）使用倍图来提高图片质量，解决在高清设备中的模糊问题；

（2）将准备的图片比实际需要的尺寸大小大几倍（看实际需求）；

4. 背景缩放（background-size）

（1）规定背景图像的尺寸

（2）background-size：背景图片宽度 背景图片高度

（3）单位:长度|百分比| cover| contain;

① cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；（background-size：cover）

② contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（高度和宽度等比例拉伸、background-size：contain）

5. 相关代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 500px;
        border: 1px solid black;
        background: url(../2.旋转木马/1.png) no-repeat;
        /* background-size: 500px; */
        /*完全覆盖盒子*/
        /* background-size: cover; */
        /*contain 高度和宽度等比例拉伸，当宽度或高度铺满盒子就不再拉伸*/
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

未使用background-size

 使用了background-size

使用cover

四、移动端开发

（一）开发选择

1. 单独制作移动端页面（主流）

（1）不改变原本的PC端页面，单独制作一个页面；

（2）通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

2. 响应式页面兼容移动端（其次）

（1）优点：通过屏幕宽度来改变样式，以适应不同终端；

（2）缺点：制作麻烦，需要解决兼容性问题。

（二）常见布局

1. 移动端技术选型

（1）单端制作移动端页面

① 流式布局（百分比布局）

② flex弹性布局

③ less+rem+媒体查询布局

④ 混合布局

（2）响应式页面兼容移动端

① 媒体查询

② bootstarp

2. 流式布局

（1）流式布局，就是百分比布局，也称非固定像素布局。

（2）通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸宿，不受固定像素的限制，内容向两侧填充。

（3）流式布局方式是移动web开发使用的比较常见的布局方式。

max-width（最大宽度） min-width（最小宽度）

max-height（最大高度） min-height（最小高度）

（三）移动端技术解决方案

1. 移动端浏览器

（1）移动端浏览器基本以webkit内核为主，因此考虑webkit兼容性问题，可使用H5标签和CSS3样式；

（2）浏览器的私有前缀只需要考虑添加webkit即可；

2. css初始化normalize.css的优点：

（1）保护了有价值的默认值

（2）修复了浏览器bug

（3）是模块化的

（4）拥有详细的文档

3. css3盒子模型box-sizing

（1）传统模式宽度计算:盒子的宽度=CSS中设置的width + border + padding

（2）CSS3盒子模型:盒子的宽度=CSS中设置的宽度width里面包含了border和padding也就是说，CSS3中的盒子模型，padding和border不会撑大盒子了

4. 特殊样式

五、移动WEB开发之flex布局

1. 传统布局和flex布局

（1）传统布局

① 兼容性好、布局繁琐；

② 局限性，不能再移动端很好地布局；

（2）flex弹性布局

① 操作方便，布局极为简单，移动端应用很广泛；

② PC端浏览器支持情况较差；

③ IE11或更低版本，不支持或仅部分支持。

2. flex布局与普通布局对比

（1）未加display：flex

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      div {
        width: 80%;
        height: 300px;
        background-color: skyblue;
      }
      div span {
        width: 200px;
        height: 100px;
        margin-right: 5px;
        background-color: pink;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>

（2）加了display：flex

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      div {
        display: flex;
        justify-content: space-around;
        width: 80%;
        height: 300px;
        background-color: skyblue;
      }
      div span {
        width: 200px;
        height: 100px;
        margin-right: 5px;
        background-color: pink;
        border: 1px solid black;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>

3. 布局原理

（1）当父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效；

（2）伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局；

（3）通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

4. 常见的父项属性

（1）flex-direction :设置主轴的方向；

① 在flex布局中分为主轴和侧轴（也称为行和列、x轴和y轴）；

② 默认主轴方向就是x轴方向，水平向右；默认侧轴方向就是y轴方向，水平向下。 

 ③ 具体代码及结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    /* 默认的主轴是x轴 行 row ，那么Y轴是侧轴，且我们的元素根据主轴来排列*/
    /* 翻转  */
    /* flex-direction: row-reverse; */
    /* y轴 */
    flex-direction: column;
    width: 80%;
    height: 300px;
    background-color: skyblue;
  }
  div span {
    width: 200px;
    height: 100px;
    margin-right: 5px;
    background-color: pink;
    border: 1px solid black;
    flex: 1;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

（2）justify-content :设置主轴上的子元素排列方式；

① 具体代码及结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    /* 默认的主轴是x轴 行 row ，那么Y轴是侧轴，且我们的元素根据主轴来排列*/
    flex-direction: row;
    /* justify-content:设置主轴上排列方式; */
    /* justify-content: center; */
    /* 平分剩余空间 */
    /* justify-content: space-around; */
    /* 先两边贴边再分配剩余的空间 */
    justify-content: space-between;
    width: 80%;
    height: 300px;
    background-color: skyblue;
  }
  div span {
    width: 200px;
    height: 100px;
    margin-right: 5px;
    background-color: pink;
    border: 1px solid black;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

（3）flex-wrap :设置子元素是否换行；

① 默认情况下，项目都排在一条线上（又称“轴线”），flex-wrap属性定义，flex布局中默认不换行。

② 属性分为：nowrap（不换行）和wrap（换行）；

③ 具体代码和结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    width: 600px;
    height: 300px;
    background-color: skyblue;
    /* flex布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素中 */
    flex-wrap: wrap;
  }
  div span {
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: pink;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>

（4）align-content :

① 设置侧轴上的子元素的排列方式(多行)；设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行），在单行下是没有效果的；

② 属性值：

③ 具体代码和结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    width: 600px;
    height: 400px;
    background-color: skyblue;
    flex-wrap: wrap;
    /* 因为有了换行，此时侧轴上控制子元素的对齐方式为align-content */
    /* align-content: center; */
    /* align-content: space-between; */
    align-content: space-around;
  }
  div span {
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: pink;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>

​​​​​​​

（5）align-items :设置侧轴上的子元素排列方式(单行)；

① 在子项为单项（单行）的时候使用；

② 属性值：

③ 具体代码和结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    width: 600px;
    height: 400px;
    background-color: skyblue;
    /* 默认主轴是x轴 */
    justify-content: center;
    /* 侧轴居中 */
    /* align-items: center; */
    /* 拉伸，但是子盒子不要给高度 */
    /* align-items: stretch; */
    align-items: center;
  }
  div span {
    width: 150px;
    /* height: 100px; */
    margin: 10px;
    background-color: pink;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

*align-items与align-content的区别

① align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸；

② align-content 适用于换行(多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；

③ 总结就是单行找align-items 多行找 align-content。

（6）flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap。

flex-flow: row wrap;

5. flex布局子项常见属性

（1）flex子项目占的份数；

① flex属性定义子项目分配其剩余空间，用flex设置所占份数；

② 具体代码和结果：

<style>
  section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: skyblue;
    margin: 100px auto;
  }

  section div:nth-child(1) {
    width: 100px;
    height: 150px;
    background-color: aquamarine;
  }

  section div:nth-child(2) {
    flex: 1;
    background-color: pink;
  }

  section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: cornflowerblue;
  }

  p {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
  }

  p span {
    flex: 1;
    border: 1px solid black;
  }
  p span:nth-child(2) {
    flex: 2;
  }
</style>

<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>
  <p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </p>
</body>

（2）align-self :控制子项自己在侧轴的排列方式；

① align-self属性允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性；

② 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；

（3）order :定义子项的排列顺序（前后顺序）；

① 数值越小，排列越靠前，默认为0。

② 具体代码和结果：

<style>
  div {
    display: flex;
    width: 80%;
    height: 300px;
    background-color: pink;
    /* 让三个盒子沿侧轴底侧对齐 */
    /* align-items: flex-end; */
    /* 只想让三号盒子沿侧轴底侧对齐 */
  }

  div span {
    width: 150px;
    height: 100px;
    background-color: skyblue;
    margin-right: 5px;
  }

  div span:nth-child(2) {
    /* 默认是0，-1比0小所以在前面 */
    order: -1;
  }

  div span:nth-child(3) {
    align-self: flex-end;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

*线性渐变（必须加上浏览器私有前缀）

起始方向可以是:方位名词或者度数，如果省略默认就是top。

 具体代码及结果：

<style>
  div {
    width: 600px;
    height: 180px;
    background: -webkit-linear-gradient(top left, red, blue);
  }
</style>

六、移动WEB开发之rem适配布局

1. 基础和特点

（1）rem (root em)是一个相对单位，类似于em；

（2）em是父元素字体大小，而rem的基准是相对于html元素的字体大小；

例如：根元素(html）设置font-size:12px，非根元素设置width:2rem，则换成px表示就是24px。

（3）可以通过修改html里面的文字大小来改变页面中元素的大小，从而整体控制。

2. 媒体查询

（1）特点

① 使用@media查询，可以针对不同的媒体类型定义不同的样式；

② @media可以针对不同的屏幕尺寸设置不同的样式；

③ 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；

④ 应用广泛，目前针对很多苹果手机、Android手机，平板等。

（2）语法规范

@media mediatype and|not|only (media feature){
    CSS-Code;
}

① 使用@media开头；

② mediatype：媒体类型；

③ 关键字and not only；

④ media featur：媒体特性（必须包含在小括号内）。

（3）媒体特性

① 每种媒体类型都具有不同的特性，根据不同的媒体类型的媒体特性可设置不同的展示风格（包含在小括号里）；

② 属性值：

​​​​​​​

③ 具体代码及结果：

/* 这句话的意思是：在屏幕上并且最大的宽度是800像素 */
/* max-width 小于等于 */
/* 此处代表当body的宽度小于等于800像素时，则背景颜色为skyblue */
@media screen and (max-width: 800px) {
  body {
    background-color: skyblue;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: pink;
  }
}

（4）引入资源

① 原理：直接在link中判断设备的尺寸，根据不同的尺寸引用不同的css文件；

② 语法规范：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3. less基础

（1）css缺点

① CSS是一门非程序式语言，没有变量、函数、SCOPE (作用域）等概念

② CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的；

③ 不方便维护及扩展，不利于复；

④ CSS没有很好的计算能力；

⑤ 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

（2）less介绍

*总结：​​​​​​​Less是一门css预处理语言，扩展了css的动态特性。

① Less ( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器；

② 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性；

③ 在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。

（3）Less使用

① Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

格式：@变量名：值；

变量命名规范：

a. 必须以@为前缀；

b. 不能包含特殊字符；

c. 不能以数字开头；

d. 大小写敏感。

② less编译

a. 本质上，Less包含—套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。（即将文件后缀名设置为less）

b. 编译方法：使用vocode less插件（Easy LESS插件用来把less文件编译为css文件）。

③ less嵌套

① 具体代码和结果：

//less文件中的代码
.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1.less嵌套 子元素的样式直接写到父元素里面
    a {
        color: red;
        font-size: 20px;
    // 2.伪类选择器、伪元素选择器、交集选择器，需要再内层选择器的前面加&
        &:hover {
            color: blue;
        }
    }
}

.nav {
    font-size: 30px;
    width: 300px;
    height: 300px;
    background-color: skyblue;
    .logo {
        color: red;
    }
    &::before {
        content: "";
        display: block;
        width: 100px;
        height: 100px;
        background-color: purple;
    }
}
//css文件中的代码
.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
  font-size: 20px;
}
.header a:hover {
  color: blue;
}
.nav {
  font-size: 30px;
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
.nav .logo {
  color: red;
}
.nav::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: purple;
}

④ less运算

a. 运算符的左右两侧必须加上空格；

b. 两个数参与运算，如果只有一个数有单位，则最终结果以这个单位为准；

c. 两个数参与运算，如果两个数都有单位且单位不一样，则最终结果以第一个单位为准。

d. 具体代码和结果：

//less文件中代码
@border: 5px + 5;
div {
    width: (200px - 50) * 2;
    height: 200px * 2;
    border: @border solid black;
    background-color: #666 - #222;
}
img {
    width: (82rem / 50px);
    height: (82 / 50rem);
}
//css文件中代码
div {
  width: 300px;
  height: 400px;
  border: 10px solid black;
  background-color: #444444;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

（4）rem适配方案

① 适配目标

使一些不能等比自适应的元素，当设备尺寸发生改变时，等比例适配当前设备。

② 如何实现目标

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化时元素尺寸也会发生变化，从而达到等比缩放的适配。

③ 如何在实际开发中使用

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)

CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;

④ rem适配方案技术使用（市场主流）

a.less+媒体查询+rem

b.flexible.js+rem

⑤ 最终公式：页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)

a. 屏幕宽度 / 划分的份数：html中font-size的大小；

b. 也可为：页面元素的rem值 = 页面元素值(px) / (html中font-size的大小)

#END（具体可观看b站pink老师css后续移动端视频）​​​​​​​

逃逃日塔灰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
移动端笔记 平面转换2D
03-09
移动端笔记 平面转换2D
移动端学习笔记（一）
anran_1211的博客
08-02 273
viewport：视口（可视区窗口） 默认不设置viewport一般可视区宽度在移动端是980 width：可视区域的宽度（number || device-width） user-scalable：是否允许用户缩放，如果user-scalable = no，则说明不可以缩放 user-scalable = yes，允许用户缩放（iOS10无效） 默认字体设置：Helvetica 清除点击的阴影：-webkit-tap-highlight-color 消除按钮圆角：-webkit-appearance ，如
移动web开发相关笔记（一）
jwlLWJ_2018的博客
06-12 189
1.https://open.baidu.com/（百度数据开发平台）,http://lbsyun.baidu.com/index.php?title=car/api/weather（百度车联网API），这两个数据开发平台，一个是可以直接查，一个是有对应的api给你用。2.https://www.bejson.com/（在线格式化json等工具资源站），这个网站有很多很实用很方便的工具（不是所有功...
移动端web学习笔记.doc
07-23
以下是一份详细的移动端Web学习笔记，涵盖了标题和描述中提到的几个关键知识点。 首先，移动端标准设置涉及到HTML的`<meta>`标签，尤其是`viewport`属性。这个标签告诉浏览器如何调整网页的宽度和缩放以适应不同的...
toutiao-m：vue移动端黑马头条
02-22
【标题】：“toutiao-m：基于Vue.js的移动端黑马头条应用” 这个项目是“toutiao-m”，一个专门针对移动端设计的新闻阅读应用，模仿了知名的“今日头条”（Toutiao）。它采用现代化的前端框架Vue.js来构建，旨在...
移动端CSS的学习笔记。
01-19
【移动端CSS学习笔记】 在移动端开发中，CSS扮演着至关重要的角色，因为它负责网页的样式和布局。本文将深入探讨移动端CSS的相关知识点，包括调试工具、视口设置、图片处理、布局策略以及响应式设计。 1. **谷歌...
移动端黑马面面笔记移动端黑马面面笔记
04-03
此外，笔记中还提到了移动端设计的特殊性。在设计稿宽度为750px的情况下，iPhone的屏幕宽度通常为375px，因此需要考虑2倍屏（2x）的适配。在移动端布局中，常使用vw（视口宽度百分比）和vh（视口高度百分比）作为...
移动端taro笔记(个人笔记)
10-31
【移动端Taro笔记(个人笔记)】 Taro是一款开源的多端开发框架，它允许开发者使用React语法编写代码，然后可以编译到微信小程序、H5、支付宝小程序、百度小程序等多个平台，极大地提高了代码的复用性和开发效率。这...
HTML5与移动端web学习笔记
02-26
新的HTML元素，例如section,nav,header,footer,article等用于绘画的Canvas元素用于多媒体播放的video和audio元素用于定位的GeolocationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI手机网页开发。...
移动端web总结笔记1
08-08
移动端 Web 开发总结笔记 移动端 Web 开发是一个复杂的过程，涉及到多个方面的技术，包括 HTML、CSS、JavaScript、网络协议等。本笔记总结了移动端 Web 开发的一些重要知识点，包括头部定义、触摸事件、页面跳转、...
toutiao-m：头条移动端
02-26
【标题】"toutiao-m：头条移动端"是一个基于Vue.js框架构建的移动应用程序项目，用于实现类似今日头条的新闻阅读体验。这个项目可以帮助开发者理解和学习如何使用Vue.js来开发高效的、响应式的移动端应用。 【描述...
react-native移动端开发笔记1
08-08
这篇移动端开发笔记将带你逐步进入React Native的世界，首先从基础环境的搭建开始。 1. 安装Node.js Node.js是React Native开发的基础，因为它提供了npm（Node Package Manager），这是JavaScript包管理器，用于...
移动端--笔记
weixin_63442947的博客
08-20 552
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。从iphone4开始，提出了一个高清视网膜显示屏的概念，在相同的屏幕大小内，物理像素点多了一倍，这个时候，开始用多个物理像素点来解析一个css像素。100%是占据父元素大小的全部，如果父元素只有400，他就占400，参照物是父元素，所有，100%和100vw、100vh有本质区别。——《5》关键词 auto-fill (需要搭配repeat()使用，一般当做repeat的第一个值，根据第二个值来决定平铺几次)
移动端笔记（一）----基础部分
weixin_45904557的博客
03-23 572
前言 前面已经学完了html、html5、css以及css3的内容，今天会在补充一个css3的布局样式，但是侧重于移动端的基础知识 PC开发考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，更多考虑的是手机分辨率的适配。在布局上，移动端开发要做到布局自适应的，需要熟练使用rem布局 提示：以下是本篇文章正文内容，下面案例可供参考 一、css3新增布局样式 分栏 column-count 列数 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创..
移动端web开发个人笔记
Kami丶
11-02 1211
移动web 建议使用H5的api 或使用zepto.js的库（基于高版本浏览器开发）。 https://zeptojs.com/ 适配问题 使用百分比布局（也叫流式布局），还需对移动端的viewport视口进行设置。 视觉窗口：viewport，是移动端特有。这是一个虚拟的区域，承载网页的。 承载关系：浏览器→viewport→网页。 适配方案（标准） 网页宽度必须和浏览器保存一致。 默认显...
pink老师移动端笔记
最新发布
09-01
pink老师的移动端笔记来源于他的前端课程。这些笔记整理自他的前端入门教程，该教程可以在Bilibili上找到。笔记中包含了关于CSS的一些内容，比如CSS的颜色属性和文本装饰，以及CSS3过渡的使用方法。这些笔记可以帮助学习者更好地理解移动端开发中的一些基础知识和技术。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【整理+总结】pink老师前端三件套之CSS笔记（二）CSS属性 & 元素显示模式 & 引用方式 & 三大特性](https://blog.csdn.net/weixin_42771853/article/details/128241735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [B站pink老师HTML+CSS笔记](https://blog.csdn.net/m0_56428225/article/details/125385994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值