有關響應式佈局

時間 2019-11-15

標籤有關響應佈局简体版

原文原文鏈接

（持續更新中......）瀏覽器

設置meta 標籤

<!-- HTML <head></head> 中加入 -->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

注：scala

width 和height 指令分別指定視區的邏輯寬度和高度，單位是以像素爲單位的數字或特殊標記符號（如device-width）；code
initial-scale 指頁面初始縮放比例，默認值因智能手機瀏覽器的不一樣而有所差別，一般狀況下設備會在瀏覽器中呈現出整個Web 頁面，設爲1.0則將顯示未經縮放的Web 文檔；文檔
user-scalable 指令指定用戶是否能夠縮放視區(yes/no);it
maximum-scale 和minimum-scale 指令用於設置用戶對Web頁面縮放比例的限制。範圍爲0.25 ~ 10.0;渲染

使用媒體查詢(Media Query) 對指定視圖寬度範圍的頁面進行渲染

例如：meta

@media screen and (max-width: 980px) {
  /* styles */
}

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。