欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

less响应式布局方案分享

css教程 我的站长站 2023-09-19 共60人阅读

分享一套作用的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年前
  • less自定义变量方法

    在less开发中,less和其他编程语言一样,都有变量的概念,学会less自定义变量可以节省很多开发时间。如何自定义less变量使用符号@ 例如:@blue:#5B83AD;@FontSize:16px;@之后的变量名随意自取,:后面就是变量的值如何使用less变量color:@bluefont-size:@fontS...

    css教程 103 1年前
  • less响应式布局方案分享

    分享一套作用的less响应式布局方案,因为less不支持函数方法,所以只能使用计算方法,来实现自动换算终端分辨率比例的功能,下面这套是我的站长站自用的方案,分享给大家。// 默认大小,放在最上面html { font-size: 50px;}// 我们此次定义的划分的份数 为 1...

    css教程 60 1年前
  • 利用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年前
  • 什么是响应式网站?
    什么是响应式网站?

    什么是响应式网站?什么是响应式网站截图响应式网站指的是同一个网站,可以支持在iPai、手机、电脑以及其他各种设备上能够正常访问网站,它可以根据设备屏幕大小进行等比缩,不会影响到最终的展示效果。...

    经验分享 161 3年前
  • less响应式布局方案分享

    分享一套作用的less响应式布局方案,因为less不支持函数方法,所以只能使用计算方法,来实现自动换算终端分辨率比例的功能,下面这套是我的站长站自用的方案,分享给大家。// 默认大小,放在最上面html { font-size: 50px;}// 我们此次定义的划分的份数 为 1...

    css教程 60 1年前