解決PC端、移動端頁面自適應性問題

時間 2019-11-30

標籤解決移動頁面適應性問題欄目無線简体版

原文原文鏈接

其實，隨着硬件和瀏覽器的不斷更新，曾經的瀏覽器兼容已經再也不是開發者的噩夢。而移動H5開發逐漸成爲一種主流，不斷趨向於成熟。css

因此，咱們更須要加以注意的應該是PC端和移動端頁面的適應問題，好比pc端多列變單列，導航欄變側邊欄...html

主要問題：web

開發時，咱們一般還須要考慮到不一樣電腦屏幕尺寸，以及不一樣手機屏幕大小等問題，解決當樣式發生改變的狀況，那麼如何解決呢？django

解決：瀏覽器

主要是採用自適應、響應式設計來解決高度，寬度的，以及圖片自適應問題app

具體能夠參考閱讀佈局

https://www.jb51.net/web/459394.html字體

移動端

其實，移動端的自適應高度和寬度要更簡單，就是要加入一行viewport標籤url

首先，先了解H5頁面的基本組成

1 <!DOCTYPE html>
2 　　<head>
3  　　　<meta charset="utf-8">
4 　　　　<title>title</title>
5 　　</head>
6 <body>
7 </body>
8 </html>

meta viewport模板（支持響應式佈局）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<meta charset="utf-8">
 5 　　<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 6 　　<meta content="yes" name="apple-mobile-web-app-capable">
 7 　　<meta content="black" name="apple-mobile-web-app-status-bar-style">
 8 　　<meta content="telephone=no" name="format-detection">
 9 　　<meta content="email=no" name="format-detection">
10 　　<title>標題</title>
11 　　<link rel="stylesheet" href="index.css">
12 </head>
13 <body> 這裏開始內容 </body>
14 </html>

如上面的meta viewport模板所示，首先，在網頁代碼的頭部，加入一行viewport標籤：spa

viewport，是網頁默認的寬度和高度。

該行代碼表示，網頁的寬度默認等於設備屏幕的寬度，原始縮放比例爲1，即網頁初始大小佔屏幕面積的100%

重要概念理解

1：因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。具體說，CSS代碼不能指定像素寬度：width:xxx px；可指定百分比寬度：width: xx%；或者width:auto；

2：字體大小通常使用em，儘可能少使用px

3：儘可能使用流動佈局

4：①自適應網頁設計的核心，就是CSS3的引入的media query，多媒體查詢模塊，會自動探測屏幕寬度，而後加載相應的CSS文件

示例：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="style.css" />，當屏幕小於400時，就加載style.css這個文件

5：②除了使用html標籤加載CSS文件，還能夠在現有CSS文件中加載

示例：@import url("style2.css") screen and (max-device-width: 800px)，當小於800px屏幕時，就加載style2.css文件

6：🌂除了使用html標籤和css文件加載css文件，還能夠直接在css經過@media來添加css樣式代碼

示例：@media screen and (max-width: 960px){　　body{background: #000;　　}

7：圖片的自動縮放，比較簡單。只須要一行CSS代碼：

img{ max-width: 100%;}，建議根據不一樣的屏幕分辨率，加載不一樣大小像素的圖片