提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、 媒体查询(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;}
- @media 固定写法
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
(1)媒体类型(mediatype )
(2)关键字
and:可以将多个媒体特性连接到一起,相当于“且”的意思。
not:排除某个媒体类型,相当于“非”的意思,可以省略。
only:指定某个特定的媒体类型,可以省略。
(3)媒体特性( media feature)
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
min-width、max-width:最小、最大宽
orientation:landscape、orientation:portrait:横屏、竖屏
orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度)
orientation: landscape(横屏,即设备中的页面可见区域高度<=宽度)
下图为orientation的兼容性,最小最大值一直都有,然后说明一下orientation的兼容性也是很好的,可以放心使用。需要注意的是:竖屏很少使用,因为默认就是竖屏,这个其实可以不用写。
<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的尺寸 = 设计稿标注的尺寸/100px1rem
如果一个盒子100px,内间距16px,那就是width: 1rem; padding: 0.16rem。由于计算是基准值为100px,所以计算也较为简单。
1. sass 中的each方法(循环)
sass 官网:https://www.sass.hk/docs/
2. less 中的each方法(循环)
当然了,less也是有遍历的方法的,如下官网示例
2. 代码
sass 代码文章来源:https://www.toymoban.com/news/detail-690319.html
// 计算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模板网!