整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
咱們來看一組數據：
首頁頁面寬度 px：
Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網易 960
Live Search 958
搜狐 950
優酷 960
AOL 960
上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結構較復雜，都可以認為是門戶型網站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什么固定規律，共同的特點是：功能專一，頁面結構相對簡單。
根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.
這是一件很有趣的事情，為什么要選擇這個寬度呢？這個寬度值究竟有什么魔力？
神奇的960
設計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下，打開Firefox：
自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.
有趣的960就這樣出現了。是的，可以認為一切就這么簡單。柵格系統最早出現在平面設計領域，設計師們愛用蘋果，蘋果下瀏覽器的默認寬度為960px, 于是960就這么“自然”地出現了。
數字背后的奧妙
上面的“自然”出現，細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數，自然另有奧妙。
科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：
960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480共26種（26 = 7 * 2 * 2 - 2, 減去2是去掉1和960自身），我們標記為：
N(960) = N(2^6 * 3 * 5) = 26
根據上面的算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30
根據直覺（嚴格證明也不難，不過還是留給數學系的學生去證明吧），我們得到一個有趣的結論：
要使得N(width)較大，width的取值有兩個系列：
A系列： …, 320, 720, 1440, …
感覺有用的朋友，點個關注，給個收藏，就是對我堅持更新，最好的支持
TML 表單用于收集不同類型的用戶輸入，它是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個部分，希望對大家學習有所幫助喲！
本文福利后臺回復【學習】即可獲得Python、HTML等編程學習資料
HTML 表單
表單使用表單標簽 <form> 來設置:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML 表單 - 輸入元素
多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。
如何在 HTML 頁面創建文本域？
用戶可以在文本域中寫入文本，參考代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表單本身是不可見的。并且注意一個文本字段的默認寬度是20個字符。</p>
</body>
</html>
運行結果為
如何創建 HTML 的密碼域？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>
</body>
</html>
運行結果如下
戳了解更多免費領取HTML試聽課~
原生app（native app）
原生app是基于操作系統的開發，比如安卓，ios，windows phone,他們只能在各自的操作系統上運行。
優點：
缺點：
混合app（Hybrid App）
使用H5C3開發頁面，打包成不同平臺的應用（ipa，apk等）
優點：
缺點：
Web App
Web應用使用H5C3開發頁面，為瀏覽器設計的基于web的應用，可以在各種智能設備的手機瀏覽器上運行。
優點：
缺點：
總結：
三種開發各有優缺點，具體用什么需要根據實際情況而定，比如預算，app注重功能還是內容等。
屏幕與分辨率
移動設備與PC設備最大的差異在于屏幕，這主要體現在屏幕尺寸和屏幕分辨率兩個方面。
#
屏幕尺寸
通常我們所指的屏幕尺寸，實際上指的是屏幕對角線的長度（一般用英寸來度量）如下圖所示
#
屏幕分辨率
分辨率則一般用像素來度量，表示屏幕水平和垂直方向的像素數，例如1920*1080指的是屏幕垂直方向和水平方向分別有1920和1080個像素點而構成，如下圖所示,分辨率越高，越清晰。
像素：指計算機顯示設備中的最小單位，即一個像素點的大小。
像素是相對長度單位，在屏幕分辨率越高的設備，像素點越小，屏幕分辨率越低，像素點越大。
#
像素密度ppi(了解)
PPI（Pixels Per Inch）值來表示屏幕每英寸的像素數
利用 勾股定理 我們可以計算得出PPI
PPI值的越大說明單位尺寸里所能容納的像素數量就越多，所能展現畫面的品質也就越精細，反之就越粗糙。
結論：當PPI 越大，展示的畫質越精細。
#
設備獨立像素
隨著技術發展，設備不斷更新，出現了不同PPI的屏幕共存的狀態,給我們開發帶來困難
做為用戶是不會關心這些細節的，他們只是希望在不同PPI的設備上看到的圖像內容差不多大小，所以這時我們需要一個新的單位，這個新的單位能夠保證圖像內容在不同的PPI設備看上去大小應該差不多，這就是獨立像素,也叫（設備無關像素），在IOS設備上叫PT，Android設備上叫DP，在css中，叫PX。
獲取設備的像素比
window.devicePixelRatio //物理像素與獨立像素的比值
#
2倍圖與3倍圖（重要）
在工作的過程中，從UI那拿到的設計圖通常都是640的設計圖或者是750的設計圖.
把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。
設備像素比devicePixelRatio：即像素的壓縮比例
結論 ：在移動端為了在高清屏手機上顯示得更加細膩，通常會使用更大的圖片，比如2倍圖或者3倍圖。
#
視口viewport（重要）
問題：一個電腦上的網站，在手機端訪問，效果是什么樣的？ iPhone5的設備寬度只有320px，一張寬度為640px的圖片在手機端訪問，顯示的效果是什么？ 1. 在手機端，html的大小都是980px，為什么？ 這主要是歷史原因導致的，因為在移動設備剛流行的時候，網站大多都是pc端的，pc端的頁面寬度一般都比較大，移動設備的寬度比較小，如果pc端頁面直接在移動端顯示的話，頁面就會錯亂。為了解決這個問題，移動端html的大小直接就定死成了980px（因為早起的pc端網站版心就是980px居多）。 2. 視口 在pc端，html的大小默認是繼承了瀏覽器的寬度，即瀏覽器多寬，html的大小就是多寬，但是在移動端，多出來了一個視口的概念（喬布斯）,視口說白了就是介于瀏覽器與html之間的一個東西，視口的寬度默認定死了980px，因此html的寬度默認就是980px，視口的特點是能夠根據設備的寬度進行縮放。 3. 視口設置。 對于現在的移動端頁面來說，視口默認為980px肯定不合適，因為設備寬度不夠的話，視口會進行縮放，導致頁面展示效果不好看。
視口參數設置
//width 設置視口的寬度 //width=device-width 設置視口寬度為設備的寬度（常用）。 //initial-scale 設置初始縮放比例 //initial-scale=1.0 表示不縮放 //user-scalable 設置是否允許用戶縮放 //user-scalable=no 不允許用戶縮放 //maximum-scale 設置允許的最大縮放比例 //maximum-scale=1.0 可以不設置，因為都禁止用戶縮放了。 //minimum-scale 設置允許最小縮放比 //minimum-scale=1.0 不設置，因為都禁用用戶縮放了。 //標準寫法： //快捷鍵： meta:vp + tab鍵 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
#
移動端調試問題
手機設備五花八門，屏幕尺寸都大不一樣，尤其是安卓端，給我們的頁面預覽帶來了一些麻煩。在實際工作中，作為開發者不可能有足夠的設備讓我們去測試（除了測試部門 ），即便有，效率也特別的低，因此開發者一般都是通過瀏覽器的手機模擬器來模擬不同的設備。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
