使用rem + sass + 媒体查询 进行横竖屏适配移动端项目

这篇具有很好参考价值的文章主要介绍了使用rem + sass + 媒体查询 进行横竖屏适配移动端项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


一、 媒体查询(Media Query)

1.简单了解

常见的媒体查询,就是1280、1440、1600、1720、1920。规律也很简单,800 + 160*n。最小就是800px(最小的大部分是投影仪使用),不考虑特别设计的话屏幕的话,最大是2560px。下面使用不同分辨率变背景颜色的例子来初识媒体查询。

2.简单例子

一个根据屏幕宽度来改变背景颜色的媒体查询例子

  <style>
    html{
      background-color: pink;
    }
    @media screen and (min-width: 800px)  {
      html {
        background-color: skyblue;
      }
    }
    @media screen and (min-width: 1441px) and (max-width: 1920px){
      html {
        background-color: yellow;
      }
    }
    @media screen and (min-width: 1921px){
      html {
        background-color: blue;
      }
    }
  </style>

3. 语法

@media mediatype and|not|only (media feature) {CSS-Code;}
  1. @media 固定写法
  2. mediatype 媒体类型
  3. 关键字 and not only
  4. media feature 媒体特性必须有小括号包含

(1)媒体类型(mediatype )

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目,前端

(2)关键字

and:可以将多个媒体特性连接到一起,相当于“且”的意思。
not:排除某个媒体类型,相当于“非”的意思,可以省略。
only:指定某个特定的媒体类型,可以省略。

(3)媒体特性( media feature)

每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
min-width、max-width:最小、最大宽
orientation:landscape、orientation:portrait:横屏、竖屏
orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度)
orientation: landscape(横屏,即设备中的页面可见区域高度<=宽度)
下图为orientation的兼容性,最小最大值一直都有,然后说明一下orientation的兼容性也是很好的,可以放心使用。需要注意的是:竖屏很少使用,因为默认就是竖屏,这个其实可以不用写。

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目,前端

<style>
   @media (orientation: landscape) {
        body {
            background-color: pink;
        }
    }

    @media (orientation: portrait) {
        body {
            background-color: skyblue;
        }
    }
</style>

二、使用sass 适配移动端步骤

安装sass和项目就不多说了,直接说思路

0. sass + rem 的思路

①将根元素设置为100px,则1rem=100px,为了不失真计算出对应的比例。即 1rem = 屏幕宽度/设计图宽度100px。
即:屏幕750px,给的设计稿宽750px,那么这种情况下1rem就表示100px;如果屏幕375px,给的设计稿宽750px,那么这种情况下1rem就表示50px。
②要想做成响应式,只需要配合@media计算好对应屏幕下html font-size的值。同时由于移动端尺寸较多,使用each循环遍历设置font-size的方式更好。
③font-size的值:写入CSS的尺寸 = 设计稿标注的尺寸/100px
1rem
如果一个盒子100px,内间距16px,那就是width: 1rem; padding: 0.16rem。由于计算是基准值为100px,所以计算也较为简单。

1. sass 中的each方法(循环)

sass 官网:https://www.sass.hk/docs/

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目,前端

2. less 中的each方法(循环)

当然了,less也是有遍历的方法的,如下官网示例
使用rem + sass + 媒体查询 进行横竖屏适配移动端项目,前端

2. 代码

sass 代码

// 计算rem的基准字体
$base-font-size: 100px;
// 设计图的基准分辨率宽度
$base-width: 750px;
// 需要适配的屏幕宽度列表
$device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px,1024px, 1080px, 1152px,1366px, 1440px, 2160px;
// 根据不同设备的屏幕宽度,定义不同的的基准font-size
@each $current-width in $device-widths {
  @media (min-width: $current-width) {
    html {
      font-size: $current-width * $base-font-sizee/$base-width;
    }
  }
}

// sass 转变为css 的方法文章来源地址https://www.toymoban.com/news/detail-690319.html

@media (min-width: 240px) {
  html {
    font-size: 32px;
  }
}

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

@media (min-width: 360px) {
  html {
    font-size: 48px;
  }
}

@media (min-width: 375px) {
  html {
    font-size: 50px;
  }
}
// ......

到了这里,关于使用rem + sass + 媒体查询 进行横竖屏适配移动端项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序横竖屏切换样式适配

    一、首先明白要使用什么布局才能实现横竖屏适配?  1、rpx布局是不能直接实现的,写 两套(横屏、竖屏)样式 才可以达到想要的效果  2、使用: 百分比、rem、vwvh、vminvmax、px(px布局在不同设备上有差异 ) 都可以一套样式实现横竖屏适配 二、本文重点说css3的两个属性

    2024年02月16日
    浏览(45)
  • Vue中如何进行移动端适配与响应式布局?

    如今,移动端适配与响应式布局已经成为Web开发中不可或缺的一部分。Vue.js作为一款流行的JavaScript框架,也提供了许多有用的工具和技术来实现移动端适配和响应式布局。在这篇文章中,我们将讨论如何在Vue.js中进行移动端适配与响应式布局,包括媒体查询、flexbox布局和第

    2024年02月09日
    浏览(43)
  • 了解真实的『REM』手机屏幕适配,独家发布

    htmlFontSize 为 html 元素的字体大小。 首先来看方案1中,在屏宽为 640px 情况下的设置: @media screen and (min-width: 640px) {html{font-size:100px;}} 可以很明显的表现出这一点 1rem = 1 * 100px ,同我们最初的设定。那么我们要得到其它屏幕大小的 htmlFontSize 值要怎么办。很简单如方案3,因为我

    2024年04月16日
    浏览(34)
  • Vue中使px自动转rem配置 (h5适配问题)

    以下方法为px自动转换rem,顾名思义,配置完成后,不用再关心rem换算等等,只需按照设计稿的px值写入即可,当你保存后 PostCSS 插件会自动将px转换成所配置的rem值,并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位,在控制台被转换成了rem单位。 postcss 一种

    2024年01月22日
    浏览(73)
  • Echarts基础-安装语法高亮插件&less-rem转换动态适配大小

    Echarts是一个功能强大的JavaScript开源可视化库,专门用于创建各种图表和数据可视化。 以下是关于Echarts的一些基础介绍: 丰富的图表类型:Echarts提供了包括折线图、柱状图、散点图、饼图、雷达图、地图等多种常见的图表类型,满足不同的数据展示需求。 兼容性良好:它可

    2024年04月10日
    浏览(47)
  • 媒体查询及使用

    媒体查询 (Media Query)是CSS3新语法。         媒体查询可以根据当前显示设备的特性(如: 视口宽度, 屏幕比例,设备显示方向)为其添加css样式, 使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们

    2024年02月06日
    浏览(30)
  • 【移动端VUE】使用富文本编辑器插件 vue-quill-editor 以及移动端适配踩过的坑

    合同填写审批意见时使用富文本编辑器填写,支持字体较粗、修改颜色,最后审批历史可以展示出业务填写的效果,实现结果: 1. 安装 vue-quill-editor 2、引入 - 全局引入 在 main.js 中引入插件 - 局部引入 3、使用VueQuillEditor 这里展示局部使用的代码 然后就实现了产品想要的结果

    2023年04月08日
    浏览(54)
  • android 媒体通知栏适配

    做音乐播放器,必然要用到通知栏,由于通知栏很多版本都有改动,一些厂商也做了调整,适配起来比较麻烦,能用系统自带的就用。 这里分享一下系统媒体通知栏的适配。 需要考虑的问题如下: 1,通知栏适配,音乐播放需要常驻,所以要维护一个通知栏。 2,音控处理,

    2024年02月07日
    浏览(45)
  • 【Unity 实用插件篇】 | UI适配神器 Device Simulator 移动设备模拟器 的详细使用方法

    前言 今天带来的是Unity提供的一个设备模拟器 Device Simulator 。 它可以帮助开发者在编辑器中模拟出移动端的环境,直接进行测试。 所有操作都可以在编辑器上进行#

    2024年02月11日
    浏览(45)
  • 【Unity 实用工具篇】✨ | UI适配神器 Device Simulator 移动设备模拟器 的详细使用方法

    前言 今天带来的是Unity提供的一个设备模拟器 Device Simulator 。 它可以帮助开发者在编辑器中模拟出移动端的环境,直接进行测试。 所有操作都可以在编辑器上进行#

    2024年02月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包