wordpress ftp配置,seo是搜索引擎吗,网站设计 教程,重庆seowhy整站优化提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 一、 媒体查询#xff08;Media Query#xff09;1.简单了解2.简单例子3. 语法#xff08;1#xff09;媒体类型#xff08;mediatype #xff09;#xff0… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 一、 媒体查询Media Query1.简单了解2.简单例子3. 语法1媒体类型mediatype 2关键字3媒体特性( media feature) 二、使用sass 适配移动端步骤0. sass rem 的思路1. sass 中的each方法(循环)2. less 中的each方法(循环)2. 代码 一、 媒体查询Media Query
1.简单了解
常见的媒体查询就是1280、1440、1600、1720、1920。规律也很简单800 160*n。最小就是800px最小的大部分是投影仪使用不考虑特别设计的话屏幕的话最大是2560px。下面使用不同分辨率变背景颜色的例子来初识媒体查询。
2.简单例子 一个根据屏幕宽度来改变背景颜色的媒体查询例子 stylehtml{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;}}/style3. 语法
media mediatype and|not|only (media feature) {CSS-Code;}media 固定写法mediatype 媒体类型关键字 and not onlymedia feature 媒体特性必须有小括号包含
1媒体类型mediatype 2关键字
and可以将多个媒体特性连接到一起相当于“且”的意思。 not排除某个媒体类型相当于“非”的意思可以省略。 only指定某个特定的媒体类型可以省略。
3媒体特性( media feature) 每种媒体类型都具体各自不同的特性根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含 min-width、max-width最小、最大宽 orientation:landscape、orientation:portrait横屏、竖屏 orientation: portrait竖屏即设备中的页面可见区域高度宽度 orientation: landscape横屏即设备中的页面可见区域高度宽度 下图为orientation的兼容性最小最大值一直都有然后说明一下orientation的兼容性也是很好的可以放心使用。需要注意的是竖屏很少使用因为默认就是竖屏这个其实可以不用写。 stylemedia (orientation: landscape) {body {background-color: pink;}}media (orientation: portrait) {body {background-color: skyblue;}}
/style二、使用sass 适配移动端步骤 安装sass和项目就不多说了直接说思路 0. sass rem 的思路 ①将根元素设置为100px则1rem100px为了不失真计算出对应的比例。即 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 代码 // 计算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 的方法
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;}
}
// ......
