移动Web(rem less Vw/Vh/bootstra)

威仔敲烂了键盘

已于 2022-07-27 23:53:25 修改

阅读量331

点赞数 2

分类专栏：前端前端移动端文章标签：前端 less html

于 2022-07-23 21:38:11 首次发布

本文链接：https://blog.csdn.net/hw111520/article/details/125952750

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端移动端

3 篇文章 0 订阅

订阅专栏

移动端适配方案

flex + rem单位,做适配效果(比如淘宝和小米移动端) 当前市场最多
flex +viewport width/vh单位做适配效果(比如 B站移动端新兴

让flex做布局(盒子摆放),让rem或者vw/vh实现网页元素的尺寸(宽度和高度)适配屏幕

rem适配

rem单位:

是一个相对单位,1rem就是html文字的大小

html {
    font-size: 35px;
}

2.媒体查询:

媒体查询@media 可以自动检测视口的宽度

媒体查询一个非常大的作用是:根据屏幕宽度修改html文字大小

使用媒体查询,根据不同的视口宽度,设置不同的根字号,就完成了适配

@media (width:375px) {
    html {
        font-size: 40px;
    }
}

@media (width:320px) {
    html {
        font-size: 30px;
    }
}




综合写法:

@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width:414px) {
    html {
        font-size: 41.4px;
    }
}


.box {
    width: 5rem;
    height: 5rem;
    background-color: pink;
}

通过媒体查询.检测不同的视口宽度,设定不同的html文字大小,元素设置rem单位后 ,可以达到元素适配

flexible.js

通过媒体查询,检测屏幕大小,修改html文字大小,完成适配

px 转换成rem

在标准稿下,屏幕大小/10就是文字大小

直接使用测量的px值/37.5 就是rem的值

less (预处理器)

less可以把px单位转换到rem单位

less运算: 计算以第一个单位为准,尽量写在最后一个数字上 ,除法必须添加小括号.
less嵌套:

可以生成后代选择器

.father {
    width: 500px;
    height: 500px;
    background-color: purple;
    // 孩子
    .son {
        width: 200px;
        height: 200px;
        background-color: pink;
        p {
            color: red;
        }
    }

}

伪类和伪元素,使用&来代替父元素

.nav {
  width: 100px;
  height: 100px;
  background-color: pink;
  &::before {
    content: '1';
  }
  &:hover::before {
    color: red;
  }

3.变量:

1.变量就是储存数据的容器

2.优点是:方便修改和维护

@变量名: 值;
@fontSize: 16px;

4.less导入 :

less的导入实际是less文件的导入

less导入好处:减少了html页面的link标签数量

@import './变量.less';
@import url(./变量.less);

5.less导出:

使用less插件设置导出:

  "less.compile": {
    "out": "../css/" // 设置导出css路径
  },

手动给每个less文件指定导出 :

导出必须写到第一行

// out: 路径/文件名

6.less禁止导出:

// out: false

VW/VH :

相对单位,相对视口的尺寸计算结果
,1vw=1/100视口宽度
1vh=1/100视口宽度
vh是1/100视口宽度,全面屏视口高度尺寸大,如果混用可能导致盒子变形
文字强行换行:white-space:wrap;

white-space: wrap;
/* 文字强行换行 */

Bootstarp

响应式布局原理:通过媒体查询检测屏幕宽度,在不同的设备中,让盒子的宽度发生改变,改变布局的方式
栅格布局:它就是通过一系列的行（row）与列（column）的组合创建页面布局。 BootStrap3默认将网页分成12等份
row 可以去掉container默认的内边距
列偏移通过 col-lg-offset-*让盒子往右侧走，左边有几份

 <div class="container">
    <div class="row first">
      <div class="col-lg-4">左侧</div>
      <div class="col-lg-4 col-lg-offset-4">右侧</div>
    </div>
    <div class="row second">
      <div class="col-lg-3 col-lg-offset-3">1侧</div>
      <div class="col-lg-3 col-lg-offset-3">2侧</div>
    </div>
    <div class="row third">
      <div class="col-lg-6 col-lg-offset-3"></div>
    </div>
  </div>

5.一个盒子里面可以再嵌套其他的盒子，但是站在这个盒子的角度来看，他又分为了12份。

<div class="container">
    <div class="row">
      <div class="col-lg-4">
        <p class="col-lg-6">登录</p>
        <p class="col-lg-6">注册</p>
      </div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-4">3</div>
    </div>
  </div>