【WEB 前端抱团学习群】0330 期技术分享:CSS

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?

——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?

——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?

——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?

——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?

——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?

——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……

——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


以下,是微信抱团群内举行的一次文字技术分享,全程内容如下:


妙味-小妖:趁着这会儿聊天人少,我偷偷发个消息提醒:

今天的群内技术分享还有不到 19 分钟就开始喽~

时间:14:00
主题:像素比、相对单位 “vw”、bootstrap 栅格系统
嘉宾:妙味讲师宋承龙
方式:WEB前端抱团微信群内-文字直播

事后会进行资料整理,整理好会发上来。
请大家合理安排时间参加~

妙味-小妖:

好了,
又到了微信群内文字技术分享的时间点了。
今天在分享之前,
照例,
来个红包打卡签到,看看有多少人在线

先公布一个好消息:

上次群内分享过后,
讲师布置了一些小练习,
共有 26 位同学提交了作业
我们从中选出 3 位优秀的作业,
给予红包奖励~

详见:https://study.miaov.com/bbs/60102


以下是获奖名单:

xujiawen 获得红包奖励:
理由:态度奖!尽管作业有些不完美 但是每个作业都做了 并且有些还不止一遍

grace 获得红包奖励:
理由:首先态度也是很好的,两个作业都做了,做出来的效果也很好,虽然有些细节没到位,但是各方面都已经比较完美了

岩哥扛枪闯红灯 获得红包奖励:
理由:效果非常棒,完全还原了设计稿,并且尽量减少了代码量

请妙味社区以下三位用户联系我们,小妖好给你们发红包哟:
用户名:xujiawen
用户名:grace
用户名:岩哥扛枪闯红灯

请三位速速联系我哈,要给你们发红包奖励


在正式分享前,我们先说一下简单的分享规则

讲师正在分享过程中,
请大家不要发与本次技术分享无关的话题。
如有其他问题可以私信 我 或者 妙味大宝
如果提醒了还随意打乱分享的小伙伴
只能遗憾的清出群了
敬请谅解~

另外,讲师们平时要上课
业余时间要做各种问题解答和技术分享,
因此大家请不要私加讲师好友,
有问题可以汇总到我们这里
我们会及时给大家举行技术分享活动
敬请理解哈~

我们本次分享方式是:
【微信群内文字技术分享】

分享过后
我们会把分享过程整理成文稿
并第一时间发布到群中
方便错过了的同学事后观看

OK,闲话不多说,
接下来请出妙味全职讲师宋承龙,
给大家带来今天的精彩分享内容~


妙味讲师 宋承龙 出场:

大家好 我是宋承龙

我们接着上回的分享 今天先来看测试题中的第九题

这个题的考核点有两个

一个是对于像素比这一块的理解
第二个就是对于相对单位 vw 的理解

先来看第一点,像素比。

像素比,简单来说其实就是“设备物理像素”与“设备独立像素”的比例

这一块的知识点,比如说什么 物理像素,独立像素,渲染像素,像素密度等等一堆的东西在这里咱们就不去解释了,和我们关系不大而且容易晕。

大家要是有兴趣的话可以自己找点资料去看看
我们主要关注像素比这东西就好了

举一个很简单的例子:大家都知道苹果电脑的屏幕号称是视网膜屏

我们会发现在苹果电脑上我们给定一个 100px 的盒子,在页面中渲染出来

然后再拿到 ps 里面去量,会变成 200px

估计很多人都有遇到过这个问题 这是为什么呢? 这就是因为像素比

苹果电脑屏幕的像素比为 2 而我们其他电脑的屏幕像素比一般都是 1

再简单点来解释就是 当设备像素比为2的时候,屏幕会用2个像素点来渲染1个像素的内容

那么从这里来看的话 当设备的像素比为2 而分辨率是750的时候,实际上在这台设备上的宽度就变成了375px

所以回到题中,我们得到的屏幕宽度就是375px

再来看第二点:vw

vw 是一个相对单位,和大家知道的 em 一样

em 是相对于当前元素的文字大小。而 vw 则是相对于屏幕的宽度

1vw 相当于屏幕宽度的 1% 这个比例是固定的 大家记住

所以题中的 10vw 也就是屏幕宽度的 10%

所以 375 * 0.1 得到的就是 37.5

行 这一块 大家理解了么?

理解 call 1 不理解 call 0



问:老师这里已经明确说屏幕宽度为 750px 吧
答:是的 屏幕宽度是 750 没错 但是当像素比为 2 的时候 我们在页面中获取到的就会是 375

问:屏幕宽度不应该是固定的吗
答:top 屏幕的宽度是固定的 但是每个手机屏幕宽度可能都不一样


后面一个是bootstrap的问题了

大家看题

题中虽然只提及了bootstrap 但是如果你只会用bootstrap 而不知道响应式是怎么回事的话,做这个题依然是有点虚的

当然,重要的还是bootstrap

这里考的是bootstrap3的栅格系统的内容

大家都知道,栅格系统是bootstrap这个框架的精髓,可以说不会用栅格系统就没有学会bootstrap

其实说起栅格系统,最先大家知道的应该就是栅格系统中 一行可以分为12列。所以答案A明显是错误的

再然后栅格系统中我们可以随意分配份数,不同的份数代表不同的宽度

并且栅格系统还可以做响应式

这个大家应该也是知道的

利用
lg(large)
md(middle)
sm(small)
xs(extra small)

四个值对应四种不同的分辨率 从而可以方便的去调整每一个盒子在不同分辨率下的状态

我们可看一下官网给出的表格

从这上面就能看出来四个值对应四种不同的分辨率

分别是:
大于1200 对应lg
大于992 对应md
大于768 对应sm

最后的xs比较特殊,它是自动的,也就代表了:如果只给定col-xs-1 那么在所有分辨率下,这个盒子始终都只会占用父级宽度的1/12

如图

以此类推,如果只指定sm 那么在sm md lg状态下都会只占用一份

那这时候我们就会发现
当指定sm的时候,在大于768的分辨率下都会生效
当指定md的时候,在大于992的分辨率下都会生效

那么这时候我们再来想想这样的响应式应该怎么写呢?

如果我们熟悉响应式 那么这个响应式的设置应该就不难写出来了

回过头来看看第二个答案:
sm对应的响应式设置为:@media all and(min-width:768px){}

答案中:@media all and(min-width:768px){}就是响应式的写法

继续看 前面@media是固定格式 媒体查询的意思

后面的all代表的是所有媒体(电脑屏幕,电视,打印机…)

后面的 and 是一个连接符 后面跟上的就是媒询条件了

min-width:768px 这句话的意思就是 当宽度大于768的时候,后面大括号{}里的代码将会生效

而在后面的答案中我们还能看到另外一个条件 : max-width:768px{}

这句话的意思就是当宽度小于768的时候,后面大括号里面的内容将会生效

然后结合我们刚才总结出来的规律来判断 其实答案就出来了

那这时候我们就会发现
当指定sm的时候,在大于768的分辨率下都会生效
当指定md的时候,在大于992的分辨率下都会生效

所以答案B才是正确的

这块大家可理解? 理解敲 1 不理解敲 0


问:xs怎么理解 第三项
答:xs适用于所有状态,也就是说指定 col-xs-1,那么在所有分辨率下这个盒子都只会占用父级的1/12

问:750px 像素比2 就是375宽的设备 一像素代表了2像素?
答:刚才这个问题 : 准确的说法是 这时候设备会用2个像素点去渲染一个像素的内容

问:同时指定sm md
答:同理 如果指定col-sm-1 那么在 sm md lg三个状态下都是1份,但是这时候xs状态就没有指定 也就变成了100%宽

问:物理像素这个有些模糊
答:关于 物理像素 的具体问题 可以看看 https://study.miaov.com/v_show/454


行 大家要是没有别的问题的话今天我们的css部分文字分享就到这里咯


精彩课程推荐:

足不出户,享受优质远程课程!

妙味 2018 年最新版 “从零基础到全栈” 全套 WEB 前端开发课程,现已开启远程班招生~

  • 资深讲师带领大家,只学精华内容、拒绝无用知识,配备走心远程服务:“直播+视频回放、全天超过 14 小时在线答疑、作业批改与练习讲解、丰富奖学金、全程面试远程指导服务…”
  • 凡你所要,必得满足!
  • 现在咨询,可享受更多课程优惠~

远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322

远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316

报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690
• 微信:miaov-class

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部