写点什么

前端中常用的媒体查询详解,sass 基础用法概览

发布于: 刚刚
前端中常用的媒体查询详解,sass基础用法概览

常用布局第三篇 —— rem 布局

回顾

在上一篇中我们结束了 flex 布局,flex 布局说的内容还是比较多的,而且对于 flex 布局来说,未来的工作中大部分的应用场景都在 flex 布局中,所以掌握 flex 布局在未来写页面时会非常的顺利,因为牵扯 flex 的内容比较多,所以在空闲的时候可以多看看 flex 相关的东西。


除此之外,这篇说的 rem 布局,也就是常说的媒体查询,常用于区分 pc 和 mobile 端内容。同时也是布局中的最后一篇内容了,下一篇开始我们就要开启前端中的另一个最最重要的 javascript 了!

rem 布局

rem 基础

em:相对于父元素字体大小


rem:相对于 html 元素的字体大小


  div {    font-size: 12px;  }
p { /* em 相对于父元素来区分大小 */ width: 5em; height: 5em; background-color: skyblue; }
复制代码



媒体查询

媒体查询(Media Query)是 css3 中的新语法


  • 使用 @media 查询,可以针对不同的媒体类型定义不同的样式

  • @media 可以针对不同的屏幕尺寸设置不同的样式

  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

  • 目前针对很多苹果手机、Android 手机、平板等设备都能用得到媒体查询


语法规范:


@media mediatype and|not|only (media feature) {  css-code}
复制代码


  • 用 @media 开头 注意 “@” 符号

  • mediatype 媒体类型

  • all 用于所有设备

  • print 用于打印机和打印浏览

  • scree 用于电脑屏幕、平板电脑、智能手机等

  • 关键字 and not only

  • and:可以将多个媒体特性连接到一起,相当于“且”的意思。

  • not:排除某个媒体类型,相当于“非”的意思,可以省略

  • only:指定某个特定的媒体类型,可以省略

  • media feature 媒体特性 必须有小括号包含

  • width:定义输出设备中页面可见区域的宽度

  • min-width:定义输出设备中页面最小可见区域宽度

  • max-width:定义输出设备中页面最大可见区域宽度


@media 可以针对不同的屏幕尺寸设置不同的样式


  /* 在屏幕上, 并且 最大的宽度是 1200px 可以设置想要的样式 */  @media screen and (max-width: 1200px) {
.box { width: 200px; height: 200px; background-color: skyblue; } }
/* 在屏幕上, 并且 最大的宽度是 500px 可以设置想要的样式 */ @media screen and (max-width: 750px){
.box { width: 100px; height: 100px; background-color: pink; } }
复制代码



在工作中媒体查询用的还是相当普遍,所以怎样使用媒体查询必须的知道。

sass 学习

sass 是 css 一种开发工具,提供了很多便利的写法,也很大的程度上节省了设计的时间,所以在现在的 css 中基本上用的都是 sass,不过在初级阶段不建议你直接入手 sass,还是从 css 一点一滴的学习,可以在 css 学的完全熟练之后再去学习 sass 的用法。这里仅作一个记录 sass 的内容和用法,感兴趣可以了解。

基本用法

  • sass 允许使用变量,所以变量以 $ 开头


$blue : #F5F5F5;div {  color: $blue}
复制代码


-如果变量需要嵌套在字符串中,需要写在 #{}之中


$side: right;
.div { border-#{side}-radius: 5px;}
复制代码


-sass 嵌套


a {  &:hover {    color: skyblue;  }}
// 只要是嵌套的话 都需要 “&”div { &span { }}
复制代码


  • 代码重用


继承 @extend :sass 允许 一个选择器继承另一个选择器。


// 如果想要 box2 继承 box1 的话
.box1 { border: 1px solid #FFFFFF;}
.box2 { @extend .box1; font-size: 12px;}
复制代码


重用代码块 @mixin:sass 可以重用代码块,使用 @include 调用 mixin


@mixin left {  display: flex;  justify-content: center;}
// 这样div中可以调用 left中的css代码div { @include left;}
复制代码


除此之外 sass 中还有一些高级的用法,例如 if 判断语句和 for 循环等语句,这里就不一一介绍了,感兴趣的话可以去官网学习。


今天是最后一讲的布局篇,下一次我们就要展开前端中很重要的 js 了!加油!!! 有什么问题可以随时留言交流

发布于: 刚刚阅读数: 2
用户头像

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变,更高效学习前端知识及后续发展趋向,更好快速的融入到工作中 关注公号:前端史塔克

评论

发布
暂无评论
前端中常用的媒体查询详解,sass基础用法概览