制作响应式网站-30天学会HTML＋CSS，制作精美网站

响应式网页设计是什麽

响应式网页设计(Responsive Web Design)简称RWD，是开发网页设计中的一种方法，在不改变网站结构，随着显示萤幕的大小调整网站的外观和布局。

如何制作响应式

设定viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性：

  • width 设定画面宽度 (数值/ device-weight)
  • height 设定画面高度 (数值/ device-height)
  • initial-scale 设定画面的初始缩放比例 (Min-0.25, Max-5)
  • minimum-scale 设定画面的最小缩放比例 (Min-0.25, Max-5)
  • maximum-scale 设定画面的最大缩放比例 (Min-0.25, Max-5)
  • user-scalable 设定是否允许使用者改变缩放比例 (1/0)

媒体查询(Media Queries)

会使用@media(尺寸) CSS来设置，根据网页画面大小设定不同的样式

media queries使用方法

在 HTML 引入
<html>
  <head>
    <title>title</title>
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" media="print" href="css/print.css">
  </head>
</html>
使用 @import
@import url("style.css") screen;
@import url("print.css") print;
在 CSS 内使用
@media screen {
  body { font-size: 16px; }
}
@media print {
  body { font-size: 14px; }
}

媒体类型（Media Type）

媒体类型是指在不同装置及萤幕尺寸，使用哪一个CSS样式

  • all：用於所有设备
  • print：印刷装置，预览列印或是印表机
  • screen：萤幕装置，电脑萤幕、手机、平板
  • speech：音讯合成装置

媒体特性（Media Feature）

  • width：宽度
  • height：高度
  • aspect-ratio：萤幕比例
  • orientation
    有portrait 为直向，landscape 为横向

Media Queries逻辑

and

两个都成立才会是true
范例：最小宽度要414px及最大宽度要767px，才会做里面的样式

@media (min-width: 414px) and (max-width:767) { ... }

or

只要满足一个条件，就会是true

or要用「,」逗号表示，否则会报错

范例：最大宽度要414px或是最小宽度要767px，满足其中一个条就，就会做里面的样式

@media (max-width:414px) , (min-width:767) { ... }

not

对Media Queries进行反向操作
范例：宽度大於375就会做里面的样式

@media not screen and (max-width:375px){ ... }

only

用来指定某种装置媒体才能套用某些样式

not 和 only 後方必须先接 media type ( 像是 screen 或 print )，不然会没有作用

响应式网站优点

  • 无需维护多个装置且相同内容的网页，减少维护时间成本
  • 单一网址，利於分享网页
  • 单一连结，可以避免重覆的内容，有利增加搜寻引擎曝光度

结论

以上是媒体查询制作响应式网站的使用方法，在设定样式时尽可能的不要写固定数值，像是px像素，改为%、vw...相对单位(在网页常用单位-30天学会HTML＋CSS，制作精美网站 ，有做过说明，有兴趣的可以到此连结看看)，或是使用max-width解决在手机版会跑版问题。

参考网站：
https://www.oxxostudio.tw/articles/201810/css-media-queries.html
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=zh-tw
https://codingdailyblog.wordpress.com/2017/07/20/html-viewport的设定与属性/


<<:  Day28: 今天来聊一下将syslog 资料连线到 Azure Sentinel

>>:  Day27-介接 API（番外篇 II）Dialogflow ES 之 Intents 与 Entities

Day 26 - 新鲜人带新鲜人篇

早上七点半的闹钟，大概是进入职场刚开始比较不习惯的事情(这应该是要报到的前端新鲜人的心情)，今天的内...

[18] [烧瓶里的部落格] 08. 撰写测试

写单元测试可以检查程序是否按预期执行，Flask 可以模拟发送请求并回传资料 应当尽可能多进行测试，...

[Day:30] 钥匙好多不知道选哪把（IOS凭证该如何管理?）

当年不懂事，看网路的教学就乱作一通，看看这可怕的凭证数量 以下解释关键的凭证申请与用途 01 登入 ...

#7 Python进阶教学4

IO 今天要介绍常见的IO操作，流程：开档 >> 处理 >> 关档，下面来讲...

Day2 - Canvas基础概论 I - 成为Canvas Ninja ～ 理解2D渲染的精髓

Let's Start From Scratch 本系列文章的头几篇我决定还是带点基础的东西，但是我...