移动前端开发

最新推荐文章于 2024-05-13 02:24:44 发布

晴宇同学

最新推荐文章于 2024-05-13 02:24:44 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44106715/article/details/123531675

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

一. 移动前端基础
二. 流式布局（百分比布局）
三. flex布局
四. rem适配布局
五. less扩展语言
六. rem适配方案
七. vw和vh

一. 移动前端基础

1.1 meta视口标签

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

1.2 多倍图

(1) 说明：对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。通常使用二倍图，因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。

(2) 解决说明：我们需要一个50 * 50像素（css像素）的图片，直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊，我们采取的是放一个 100* 100 图片然后手动的把这个图片缩小为 50* 50 （css像素），我们准备的图片比我们实际需要的大小大2倍，这就方式就是 2倍图。

background-size: 背景图片宽度 背景图片高度;

(3) 切图神器：PS中的插件cutterman

1.3 移动端技术解决方案

（1） CSS初始化 normalize.css

官网地址： http://necolas.github.io/normalize.css/

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

（2）CSS3 盒子模型 box-sizing

说明：传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

 <style>
        div:nth-child(1) {
            /* 传统盒子模型= width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
            box-sizing: content-box;
        }
        
        div:nth-child(2) {
            /* 有了这句话就让盒子变成CSS3盒子模型 */
            /* padding 和 border 不会再撑大盒子了 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

（3）特殊样式

/*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent;
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
 /*禁用长按页面时的弹出菜单*/
 img,a { -webkit-touch-callout: none; }

二. 流式布局（百分比布局）

2.1 说明：

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。

2.2 要求

一般情况下需要设置最大和最小的宽高来防止布局无限伸缩。

max-width: 最大宽度 （max-height 最大高度） 
min-width: 最小宽度 （min-height 最小高度）

三. flex布局

3.1 原理说明：

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。行内元素也可以使用此布局。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

3.2 总结flex布局原理：

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

3.3 使用

指定一个容器为flex布局。

.box{
  display: flex;
}

指定一个行内元素为flex布局

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

3.4 常见父项属性

1.以下由6个属性是对容器设置的（父元素）。

flex-direction：设置主轴的方向
flex-wrap：设置子元素是否换行 
flex-flow：复合属性，同时设置了 flex-direction 和 flex-wrap
justify-content：设置主轴上的子元素对齐排列方式
align-items：设置交叉轴上的子元素对齐排列方式（单行）
align-content：定义了多根轴线的对齐方式（多行）。如果项目只有一根轴线，该属性不起作用

2.以下6个属性设置在项目上（子元素）。

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex：定义了子项目分配剩余空间，表示这个占的份数。也可以为子元素平均分配空间。是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

四. rem适配布局

4.1 方案选择

页面布局文字能否随着屏幕大小变化而变化？
流式布局和flex布局主要针对于宽度布局，那高度如何设置？
怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

4.2 rem基础

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。（页面元素的rem值 = 页面元素值[设计稿上的值]（px） / （屏幕宽度 / 划分的份数））

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

 <style>
        html {
            font-size: 12px;
        }
        
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        
        p {
            /* 1. em相对于父元素 的字体大小来说的 */
            /* width: 10em;
            height: 10em; */
            /* 2. rem 相对于 html元素 字体大小来说的 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>

</body>

4.3 媒体查询

说明

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

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

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

目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
语法规范

@media mediatype and|not|only (media feature) {
 CSS-Code;
}
/*  
用 @media 开头 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性 必须有小括号包含
*/

mediatype的值：

all 用于所有设备

print 用于打印机和打印预览

scree 用于电脑屏幕，平板电脑，智能手机等
媒体特性的值：

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大可见区域宽度

4.4 媒体查询+rem实现元素动态大小变化

 <style>
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

4.5 媒体查询引入资源

说明：当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。

原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件
语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
/**示例**/
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

五. less扩展语言

5.1 说明：

它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且

降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。

官网：https://less.bootcss.com/

5.2 使用

通过 npm 安装

npm install less -g

使用：新建一个后缀名为less的文件，在这个less文件里面书写less语句。

5.3 变量

1. 定义：@变量名:值;

// 定义一个粉色的变量
@color: pink;  
// 错误的变量名  @1color   @color~@#
// 变量名区分大小写  @color  和  @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
div {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

Less 编译

说明：本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则

最终会通过解析器，编译生成对应的 CSS 文件。

vocode 插件：Easy LESS 插件用来把less文件编译为css文件

5.4 嵌套

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
    // 2. 如果有伪类、交集选择器、 伪元素选择器,我们内层选择器的前面需要加&,如果不加&，则它被解析为父选择器的后代；
        &:hover {
            color: blue;
        }
    }
}
.nav {
    .logo {
        color: green;
    }
    &::before {
        content: "";
    }
}

5.5 运算

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算  如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准

六. rem适配方案

6.1 原理

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸

也会发生变化，从而达到等比缩放的适配。

6.2 实际开发适配方案

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

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

6.3 技术方案

技术方案1 ：less + 媒体查询 + rem
技术方案2（推荐）：flexible.js + rem

6.4 rem 实际开发适配方案1

动态设置 html 标签 font-size 大小

① 假设设计稿是750px

② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③ 每一份作为html字体大小，这里就是50px

④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px

⑤ 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的

⑥ 比如我们以 750为标准设计稿

⑦ 一个100*100像素的页面元素在 750屏幕下，就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1

⑧ 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨ 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
元素大小取值方法

① 最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

② 屏幕宽度/划分的份数就是 html font-size 的大小

③ 或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

④页面元素值为原型设计稿上的值

6.5 flexible.js适配方案

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html 文字大小就可以了。
比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以。
里面页面元素rem值：页面元素的px 值 / 75 。剩余的，让flexible.js来去算
github地址：https://github.com/amfe/lib-flexible
使用vs code的插件（cssrem）来进行px自动转换为rem单位，安装后要修改html font-size 的大小。

七. vw和vh

7.1 说明

（1）vw/vh是一个相对单位，类似em和rem相对单位

	vw：viewport  width 视口宽度单位

	vh：viewport  height 视口高度单位

（2）相对视口的尺寸计算结果

1vw = 1/100视口宽度（即1%）

1vh = 1/100视口高度

例如：当前屏幕视口是375像素，则1vw = 3.75像素，再乘以你想设置的数值

注意：和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对当前视口来说的。

7.2 直接使用

div{
	width:10vw;
	height:10vh;
}

7.3 还原设计稿

前提：我们设计稿按照iphone8来设计的，有个盒子是50像素*50像素，如何使用vw呢：

分析：

设计稿参照ipone8，所以视口宽度尺寸是375像素（像素大厨应用中切换到2X模式就是真实iphone8像素）
那么1vw是多少像素：375px / 100 = 3.75px
我们元素的目标是多少像素呢：50px * 50px
那么50px * 50px是多少个vw：50 / 3.75 = 13.3333vw

7.4 vw注意事项

我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了，vh是很少使用的。所有的单位都使用vw。

兼容性检测网站：https://caniuse.com

div{
	width:10vw;
	height:10vw;
}

.75像素，再乘以你想设置的数值

注意：和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对当前视口来说的。

7.2 直接使用

div{
	width:10vw;
	height:10vh;
}

7.3 还原设计稿

前提：我们设计稿按照iphone8来设计的，有个盒子是50像素*50像素，如何使用vw呢：

分析：

设计稿参照ipone8，所以视口宽度尺寸是375像素（像素大厨应用中切换到2X模式就是真实iphone8像素）
那么1vw是多少像素：375px / 100 = 3.75px
我们元素的目标是多少像素呢：50px * 50px
那么50px * 50px是多少个vw：50 / 3.75 = 13.3333vw

7.4 vw注意事项

我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了，vh是很少使用的。所有的单位都使用vw。

兼容性检测网站：https://caniuse.com

div{
	width:10vw;
	height:10vw;
}

7.5 安装vs code插件自动转换vw单位：px2vw。安装后要改设计稿的视口宽度。

晴宇同学

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动前端开发

移动前端的开发笔记
复制链接

扫一扫

专栏目录