其他分享
首页 > 其他分享> > less语法 + rem适配布局

less语法 + rem适配布局

作者:互联网

一、less语法:

一、less语法之中的变量

less语法:是一门CSS扩展语言,也是CSS预处理器
它在CSS的语法基础上,引入了变量,Minxin(混入),运算以及函数等功能,大大简化了CSS编写
注:第一次使用的时候需要下载less,之后安装less插件-Easy LESS - 安装后,一保存less文件,自动生成一个css文件,直接导入css文件就好

// 1:less变量   @变量名:值    (不能数字开头,不能加特殊字符,区分大小写)
// 定义一个粉色的变量 
@color: pink;
@font14: 14px;
//2:less语法的引用
div {
    color: @color2;
    font-size: @font14;
}

二、less语法之中的嵌套

//3:嵌套
.header {
    width: 200px;
    height: 200px;
    background: yellow;

    // 子元素的样式直接写在父元素里面就好
    a {
        color: blue;

        // 注意:若是没有加&,则解析为父选择器的后代,加了&后,便是父元素自身或者父元素的伪类
        &:hover {
            color: pink;
        }
    }
}

三、less语法之中的运算

//4:运算 + - * /   
注意:两个数参与运算,最后以有单位的为主。两个数都有单位,以前面的单位为准
@border: 5px + 5; 

.box {
    width: 100px - 20;
    height: 100px /2;
    border: @border solid red;
}

二、媒体查询:

01:rem单位:一个相对单位,
    类似em,em是相对于父元素的字体大小 假如父元素的字体为12px 子元素设置的宽为10em = 120px。
    rem的话是相对于html的字体大小来计算的: 假如html的字体为12px 子元素设置的宽为10rem = 120px。:
02:rem的优点:可以通过修改html的字体大小,来改变页面中元素的大小可以整体控制
03:媒体查询:(Media Query)  可以根据瀑屏幕的大小来设置不同的尺寸
    语法:
    @media screen and (min-width: 320px) and (max-width: 374px) {
            html {
                font-size: 60px;
            }
        }
        
04:当我们屏幕大于等于640px以上,我们让div一行显示2个;
        当我们屏幕小于640px以上,我们让div一行显示1个;
        引入资源就是针对不同的屏幕尺寸调用不同的css文件 */
    <link rel="stylesheet" href="./css/stylecss.320.css" media=" screen and (min-width: 320px) ">
    <link rel="stylesheet" href="./css/style640.css" media=" screen and (min-width: 640px) ">

三、rem适配方案:

(1):技术方案1 less+媒体查询+rem

(01):媒体查询的示例

01:设计稿的尺寸宽度:大部分为 640px  750px  1080px
        /* 因为设计稿为750px,然后我们划分为15等份 就是750px/15=50px  */
        /* 因为要自适应640px,也是我们划分为15等份 就是640px/15=42.66px  */
        @media screen and (min-width: 640px) {
            html {
                font-size: 42.66px;
            }
        }

        @media screen and (min-width: 750px) {

            /* 一个100px*100px的页面元素,在750屏幕下,转化为rem就是100px/50px = 2rem */
            html {
                font-size: 50px;
            }
        }

        div {
            width: 2rem;
            height: 2rem;
            background: pink;
        }

        /* 
        1:首先我们选择一套标准 一般以750px为准(屏幕尺寸有640px 750px等)
        2:我们用屏幕的尺寸 除以 我们划分的份数,(一般是15,20,10) 得到html里面的文字大小 
        但是我们知道不同的屏幕的尺寸是不一样的
        比如: 750px / 15 = 50px ;  640px / 15 = 42.66px
        所以以750px屏幕尺寸为准,它的html文字大小为50px,用于计算页面元素的rem值
        
        3:页面元素的rem值 = 页面元素在 750像素下px值 / html 里面的文字大小
        页面元素为84px 以750px屏幕尺寸为标准 划分15等份
        页面元素的rem值 = 84px / 50px = 1.68rem
         */

(02):common.less的准备

01:// 设置常见的屏幕尺寸,修改里面的html文字大小
// 里面有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
// 我们划分为15份
// 因为我们在PC端也可以打开苏宁移动端首页,我们默认html为50px,注意这一句话下载最前面
// 定义一个份数的变量
@num: 15;

html {
    font-size: 50px;
}

//320px屏幕的
@media screen and (min-width:320px) {
    html {
        font-size: 320px / @num;
    }
}

//360px屏幕的
@media screen and (min-width:360px) {
    html {
        font-size: 360px / @num;
    }
}

// 375px iphone 678
@media screen and (min-width:375px) {
    html {
        font-size: 375px / @num;
    }
}
以下省略,待补上


02:
// 引入comomn.less 文件
//@import 导入的意思, 可以样式到另一个样式文件之中
//link 是把一个样式导入html页面之中
@import "common";

(03):页面的书写

01:先对body进行定义样式:
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
    background: #ccc;
    min-height: 1000px;
}

.w {
    width: 93.33%;
    margin: 0 3.33%;
}

img {
    /* 去除图片底下的空隙 */
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #666;
    /* 点击高亮我们在需要清除清除 设置为transparent 透明 */
    -webkit-tap-highlight-color: transparent;
}

input {
    /* 在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入自定义样式 */
    -webkit-appearance: none;
}

img,
a {
    /* 禁止长按页面的时候,弹出菜单 */
    -webkit-touch-callout: none;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

(2):技术方案2:fiexble.js + rem(推荐使用)

01:首先引入lib-flexible-2.0里面的index.min.js;:
02:然后利用VScode px转化为rem插件 ---cssrem;
操作:设置-打开设置(右边的第一个设置)--   "cssrem.rootFontSize": 75
因为是草稿是750px(屏幕),然后插件划分为10等份,所以设置为75px
03:设置body的样式
body {
    background-color: #f7f7f7;
    padding-bottom: 2rem;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    /* 因为是划分为10等份  750px / 10 = 75(html字体大小) */
    width: 10rem;
    line-height: 1.5;
    font-family: Arial, Helvetica, STHeiTi, sans-serif;
    background: #f2f2f2;
}:
04:/* 如果屏幕超过了750px,那么我们就按照750px设计稿来走,不会让我能页面超过750px */
@media screen and (min-width:750px) {
    html {
        font-size: 75px !important;
    }
}
05:搜索模块的居中
/* 搜索 */
.search-contont {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 1.173333rem;
    width: 10rem;
    background: #FFC001;
}
06:背景图片的注意点:应该考虑一个图片的话就和盒子一样大,要是精灵图就需要考虑缩放
.login {
    width: .48rem;
    height: .8rem;
    margin: .14rem .333rem .1333rem;
    background: url('../images/02.png') no-repeat;
    background-size: .48rem .8rem;
}

标签:less,适配,750px,width,html,rem,font
来源: https://blog.csdn.net/weixin_43845137/article/details/104791397