[笔记] 网页切版直播班 2020 春季班 – 第三周

章节连结

本周主要讲究响应式(RWD)网页的重点,可以运用百分比、CSS、media 等等设定来确保不同萤幕大小,都有良好的使用体验。
hex-school-logo

第三周课程重点

基础知识

  • 网页要在 <head> 部分宣告 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  • CSS 权重不同,一般的 CSS 不需要使用到 id, !important 等权重高的选项

经验谈

网页不可以出现 x 轴的 scroll bar

文字部分可以用 @media 来规范 div 大小
图片部分可以在一开始宣告:max-width: 100%; height: auto;

Global Border-box

减少你计算 pixel 的麻烦。不过若有使用到 :before, :after,要一并在一开始的时候就加进去。


切版练习结果


相关文章


按赞加入粉丝团

延伸阅读