rem+媒体查询+less

最新推荐文章于 2024-04-10 16:52:25 发布

未暖猫厮

最新推荐文章于 2024-04-10 16:52:25 发布

阅读量219

点赞数

分类专栏：移动web布局基础文章标签： less css3 前端

本文链接：https://blog.csdn.net/qq_44279495/article/details/107853633

版权

移动web布局基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

rem、媒体查询、less

Node.js下载地址:添加链接描述
1.基于Node.js安装less：步骤
1.1 先安装Nodejs再基于Nodejs安装less 网址:nodejs.cn/download
1.2 cmd在线安装less, npm install -g less 。 less安装成功检查:lessc -v
flexble.js的github下载地址:flexble.js
安装步骤在下方,也就是一直点击下一步，没有特殊的

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, inital-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
    <title>第一天-rem+less布局</title>
    <!-- 
        outline: none;->去除搜索框的蓝色边框
    重点: !important（提升权重-最高权重） 注:一般在与其他引用的库和插件冲突时使用
    /* 如超出750px设备宽度则按750px样式走 */
@media screen and (min-width: 751px) {
    /* 权重没有flexble.js的高 因此用!important(最高权重)提升权重 */
    html {
        font-size: 75px!important;
    }
}
    一.rem单位基础和适配方案
            注：em为相对父元素字体大小，如fon-size:12px,width:10em;换算为120px
        优点：rem单位根据根html元素设置，多用于整体控制宽高和字体大小来适配屏幕统一缩放大小。
        1.rem基准是相对于html元素的字体大小,如根元素html设置fon-size= 12px,非根元素设置width: 2em；
        换算为24px，相当于倍数；
        2.适配方案
            注：这时 html里的fon-size为公用值
            1. less+媒体查询+rem   ->等比例缩放计算
            注：一般选用两套标准设备尺寸来进行适配。
                1.1设计稿常见尺寸宽度
                 iphone 4.5 : 640px
                 iphone 6/7/8 : 750px;
                   注：大部分4.7~5寸安卓设备为 720px
                   注: 效果图基本以750px为主
                 android: 320/360/375/384/400/414/500/720px 
                1.2 元素大小取值方法
                    把宽度分成15等份/10等分/20等份，等等。
                    如：设备宽度为750px, html的font-size取值：750px / 15;
                        页面元素的rem值则为：页面元素在750像素下的px值/html里面的文字大小;
            
            2. flexble.js+rem (更简单 后面会学 重点)
               注:它把当前设备(所有尺寸的不同屏幕的当前设备)划分为10等份,不同屏幕尺寸下比例一致,我们只要确定好Html元素的字体大小，
               1.也需要进行计算当前设备的页面元素rem值,如:html:750/10;
                 页面元素:页面元素px值/75
                  1.1 css转换rem插件 cssrem  注：该插件默认的是html文字大小

    二.媒体查询(media Query)  属于CSS3语法
         注:根据游览器的宽度和高度重新渲染页面
        1.使用@media查询，可针对不同媒体类型和不同屏幕尺寸设置不同的样
                   媒体类型     关键字        媒体特性
        如：@media mediatype and|not|only (media feature) {
            css-Code;
        }
        mediatype(媒体类型): all(所有设备)/print(打印机和打印预览)/scree(电脑、手机平板)
        关键字:and|not|only(指定某个特定的媒体类型)，属于必写
        media feature(媒体特性): 如： width/max-width/min-width  ：x>=540px x<=970px
        2.引入资源->不同的css文件  针对不同屏幕尺寸调用css资源 同理 js等也可以
            语法：<link re="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
        如:<link rel="stylesheet" media="screen and (max-width: 320px)" href="../css/stye320.css">
    三.less布局基础和两种方案
        1.less 网址:lesscss.cn  属于新语言
        注：自动编译成css插件： Easy less  保存即可编译为css
            css预编译/预处理器，属于css扩展语言，在不减少css功能情况下加入程序式语言特性
            css预处理器如：Sass、Less、Stylus
            1.1 先安装Nodejs再基于Nodejs安装less 网址:nodejs.cn/download
            1.2 cmd在线安装less, npm install -g less 。 less安装成功检查:lessc -v
            1.3 less变量
            注：不包含特殊字符 不能以数字开头 大小写敏感 
             语法：@变量名:值; 使用:font-size: @变量名;
            1.4 less编译(转换为css文件)
                自动编译成css插件： Easy less  保存即可编译为css
            1.5 less 嵌套
                子元素直接写在父元素里
                注： 如遇到交集|伪类|伪元素选择器 加&
                      1.内层选择器前面没有&符号，则它被解析为 父选择器的后代。
                      2.如有&符号，它则被解析为父元素自身或父元素的伪类
            注：与其他语言的运算、嵌套、变量等没有区别
            1.6 less运算 如加减乘除  注：两个值有不同的单位时就取第一个单位
                                       只有一个值有单位时，则运算结果就取该单位
                                注： 运算符左右必须都有一个空格隔开
                                    颜色运算为： #red - #ccc 或者#fff - #ccc也行
        -->
     <link rel="stylesheet" media="screen and (max-width: 320px)" href="../css/stye320.css">
     <link rel="stylesheet" media="screen and (min-width: 640px)" href="../css/style640.css">
     <!-- less的编译css文件 -->
     <link rel="stylesheet" href="../less/my.css">
     <style>
         body {
             background-color: blue;
         }
         /* 根据设备宽度改变背景颜色 */
         @media screen and (max-width:800px){
             body {
                 background-color: aqua;
             }
         }
         @media screen and (max-width: 600px){
             body {
                 background-color: rgb(238, 255, 0);
             }
         }
         /* 媒体查询+rem元素动态变化 */
         .a {
             width: 100%;
             height: 1rem;
             line-height: 1rem;
             text-align: center;
             background-color: aqua;
             font-size:  0.5rem;
         }
         @media screen and (min-width: 540px){
             html {
                 font-size: 50px;
             }
             .a {
                 background-color: blue;
             }
         }
         @media screen and (min-width: 780px){
            html {
                 font-size: 100px;
             }
             .a {
                 background-color: brown;
             }
         }
     </style>
</head>
<body>
    <div class="a">购物车</div>
    <div class="bianliang">
        <div class="b">1</div>
        <div class="c">2</div>
    </div>
    <!-- 嵌套 -->
    <div class="heard">
        <a href="#" class="h">嵌套</a>
    </div>
</body>
</html>

未暖猫厮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem+媒体查询+less

rem、媒体查询、lessNode.js下载地址:添加链接描述1.基于Node.js安装less：步骤1.1 先安装Nodejs再基于Nodejs安装less 网址:nodejs.cn/download1.2 cmd在线安装less, npm install -g less 。 less安装成功检查:lessc -vflexble.js的github下载地址:flexble.js安装步骤在下方,也就是一直点击下一步，没有特殊的<html lang="en"><head&gt
复制链接

扫一扫