用户投稿Hi~又见面啦
今天来学习一下 RWD 的基础小语法，希望可以学习练习的过中程能熟能生巧呀
想要让原本在桌上型电脑能看的网页加上 RWD 自适应网站功能时需先加上 meta 语法：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />在练习过程中发现当我们在新增一个 HTML 档的时候，使用 HTML5 的快捷键时系统本身会先帮你预设好一些语法(这里使用的是 vs code)，其中一个就这是本文提到的 meta 语法：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body></html>在使用起来就方便了许多，所以就可以 不用记语法了 (大误XDD
引入 CSS 档案
接下来就是要引入 CSS 档了，先写好一个 CSS 档案，在引入到这个网页去做读取
<link rel="stylesheet" href="css/style.css">其中 "css/style.css" 是档案路径，每个人的档案路径取名不一定是相同的。
这里分享一个我刚开始学的一个错误，一开始在学怎么引入 CSS 档案的时候完全不熟就直接複制贴上别人的语法，当然要想要呈现的 CSS 样式完全出不来XD
这时候立马转头跟工程师男友求救：为什么出不来，我有引入啊Q_Q
此时男友默默的看了一下：因为你档案路径不是这个，你直接照抄当然出不来.....
不知道有没有新手跟我一样笨的(误XD
所以记得要写对档案路径呀~~~
接下来我们要把网页有图片的部份加上 CSS 的这个语法：
img { height: auto; max-width: 100%; } 加上这个语法目的是，在开发的过程中可以放便图片去按照萤幕宽度自动缩放，开发过程也能更加的顺利快速。
在 CSS 的部份，需写以下语法，可以让网页在不同的装置做自适应，这里介绍几个较常见装置尺寸的语法：
适用于一般桌上型电脑观看时需写入这段 CSS 语法：
@media screen { //这里是写入 CSS 的样式 }适用于平版直立式观看时，当宽度 小于 768 px 适用于平版直立式观看需写入这段 CSS
@media screen and (min-width:481px) and (max-width:768px { //这里是写入 CSS 的样式 }适用于手机使用观看时，当宽度 小于480 px 时需写入下面这段 CSS :
@media only screen and (max-width: 480px) { //这里是写入 CSS 的样式 }适用于 IPHONE 4、5直立式使用，当宽度小于 320 px 时需写入下面这段 CSS :
@media only screen and (max-width: 320px) { //这里是写入 CSS 的样式 }除了上面这些，当然还有许多不同装置尺寸的语法，市面上有许多种不同大小的手机、平版、桌上型电脑等等，每一种需要写入的 px 都有所不同，就依当下专案的需求来去撰写，要如何写出符合使用者的最佳使用体验是最重要的。
写这篇文章其实也花了不少时间呢，不过在写文的过程中慢慢的加深印象也是不错的，原来这就是写文的目的呀~XDD
不过专业程度还有待加强，继续加强努力，gogo加油~~!!!
微信扫一扫打赏
支付宝扫一扫打赏
