Responsive Web Design Tutorial by THENETNINJA

B站视频：https://www.bilibili.com/video/av10338325

My Github Files:

https://github.com/Li-YangZhong/Responsive-Web-Design-Tutorial.git

配套文件下载地址：https://github.com/iamshaunjp/psd-to-wp

---

Making our websites 'rsponsive' means designing responds to the specification of the device.

---

SYNTAX

@media <media-type> and (expression) {}

Examples…

@media TV and (min-width: 1200px) {}

@media screen and (max-width: 800px){}

---

CSS Formatter is an extention in Visual Studio Code for formatting CSS files.

authored by Martin Aeschlimann

From <https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter>

用法： Click Shift+Ctrl+F to format CSS file.

需要注意的是，安装CSS Formatter插件后无法使用VS Code重命名文件夹。

---

Methods for making chrome window narrower:

https://www.brianshim.com/webtricks/chrome-browser-window-that-you-can-make-narrow/

---

Simulate Mobile Devices with Device Mode in Chrome DevTools

From <https://developers.google.com/web/tools/chrome-devtools/device-mode?utm_campaign=2016q3&utm_medium=redirect&utm_source=dcc>

---

https://www.bootcdn.cn/jquery/

微软提供的jquery CDN:

https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

---

THE PICTURE TAG

<picture>

    <source srcset="small.jpg" media="(max-width: 480px)">

    <source srcset="medium.jpg" media="(max-width: 768px)">

    <img srcset="big.jpg">

</picture>

<picture> 元素的浏览器支持情况：

https://caniuse.com/#search=picture

---

picturefill.js下载地址

https://github.com/scottjehl/picturefill/blob/master/dist/picturefill.js

 

Picturefill

A RESPONSIVE IMAGE POLYFILL

From <https://scottjehl.github.io/picturefill/>

---

Common responsive frameworks include: Skeleton, Foundation, Bootstrap.

---

https://getbootstrap.com/ provides Bootstrap downloads and documents.

https://getbootstrap.com/docs/4.4/layout/grid/ explains how the grid system in Bootstrap works.