css教程

less响应式布局方案分享

我的站长站 2023-09-19 人阅读

分享一套作用的less响应式布局方案,因为less不支持函数方法,所以只能使用计算方法,来实现自动换算终端分辨率比例的功能,下面这套是我的站长站自用的方案,分享给大家。

// 默认大小,放在最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}
// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}
// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}
// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}
// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}
// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}


相关推荐
  • less
  • 响应式教程
  • hbuilderX配置less教程(图文)

    1、菜单栏中依次找到 工具->插件安装2、找到less编译插件,点击右侧安装3、新建一个less文件,然后在该文件上 右键->外部命令/插件->less->插件配置4、在打开的package.json配置文件中找到onDidSaveExecution,设置为true即可5、重启一下HBuilderX软件。...

    经验分享 127 1年前
  • Hbuilder开启less自动编译的方法

    1、我的站长站已经整理好了,直接下载附件,解压到HBuilder编辑器目录 \HBuilder\plugins,下载地址:https://11px.lanzoui.com/ifHbXsaovra2、将less路径添加到系统环境Path变量中 ;D:\Adobe\HBuilder\plugins\lessc,不会的看下图,计算机-右键-属性-高...

    经验分享 110 3年前
  • HBuilderx保存自动编译Less设置方法

    HBuilder是一款非常好用的国产代码编辑器,我的站长站以前一直在用。后来推出了HBuilderx,HBuilder就不更新了,没办法只能换成HBuilderx。试了后发现HBuilderx保存后,不能自动编译Less为CSS,网上找了这篇教程,测试可用,分享给大家。操作步骤1、依次打开,工具-...

    经验分享 89 2年前
  • 利用JavaScript判断页面宽度的响应式布局方法

    分享一个我的站长站自用的响应式网站布局方法,非常简单好用。利用JavaScript判断页面宽度,结合rem单位, 实时修改网站尺寸,达到响应式布局方法。首先前端开发中,样式尺寸单位全部用rem,比如:.content{width: 8rem;border-radius: 0.15rem;font-size: 0.95re...

    js教程 14 1年前
  • 中小企业制作响应式网站有何有优点?

    随着互联网时代不断的发展,网站是各大企业发展的必须品。但是随着近年来移动手机流行,移动端用户流量也是逐渐上涨,为了更好推广企业产品等,移动网站的制作也开始的大规模发展,由于网站不仅面向pc端,同时也是面向移动端,所以响应式网站成为众多企业的选择对...

    经验分享 226 5年前
  • 自适应与响应式网站建设的区别

    网站建设是对于一个新手来讲是一件繁琐累人的事情,首先你要考虑自己的网站用途是什么?如果自己做建设,你需要的知识是很多的,如C++、java、php、dreamweaver、photoshop、firework等等,一个网站不单单做出来,还是需要后期维护的。网站建设初期,对于无网页设...

    经验分享 256 4年前
最新更新