整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
解移動端頁面與PC端頁面開發的區別，學習移動端頁面的開發流程。
視口
視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用 meta 標簽，name=“viewport ” 來設置視口的大小，將視口的大小設置為和移動設備可視區一樣的大小。
設置方法如下( 快捷方式：meta:vp + tab )：
<head> ...... <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ...... </head>
pc端與移動端渲染網頁過程：
視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解為屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比一般屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/9。
圖像在視網膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網膜屏幕的物理像素點比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用css樣式強制把圖像的尺寸設為原來圖像尺寸的大小，就可以解決模糊的問題。
清晰度解決過程示意圖：
背景圖強制改變大小，可以使用background新屬性
background新屬性
background-size:
length：用長度值指定背景圖像大小。不允許負值。
percentage：用百分比指定背景圖像大小。不允許負值。
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
PC及移動端頁面適配方法
設備屏幕有多種不同的分辨率，頁面適配方案有如下幾種：
1、全適配：響應式布局+流體布局
2、移動端適配：
流體布局+少量響應式
基于rem的布局
流體布局
流體布局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線無法用百分比，可以使用樣式中的計算函數 calc() 來設置寬度，或者使用 box-sizing 屬性將盒子設置為從邊線計算盒子尺寸。
calc()
可以通過計算的方式給元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默認的盒子尺寸計算方式
2、border-box 置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
響應式布局
響應式布局就是使用媒體查詢的方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的布局方式，從而實現響應式布局。響應式布局的頁面可以適配多種終端屏幕（pc、平板、手機）。
相應布局的偽代碼如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
首先了解em單位，em單位是參照元素自身的文字大小來設置尺寸，rem指的是參照根節點的文字大小，根節點指的是html標簽，設置html標簽的文字大小，其他的元素相關尺寸設置用rem，這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設置的尺寸大小。
cssrem安裝
cssrem插件可以動態地將px尺寸換算成rem尺寸
下載本項目，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages… 復制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text。
配置參數 參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉rem的單位比例，默認為40。 max_rem_fraction_length - px轉rem的小數部分的最大長度。默認為6。 available_file_types - 啟用此插件的文件類型。默認為：[".css", “.less”, “.sass”]。
1、結合流體布局和響應式布局制作天天生鮮移動端首頁頁面
2、使用基于rem的布局方式制作天天生鮮移動端首頁頁面
天天生鮮首頁效果圖如下：
作的網頁除了在PC端瀏覽，在現在移動端量巨大的時代下，如何做好PC端與移動端的自適應，是每個程序必須要需要考慮的事情。
下面是沒有加適應的情況：
通過為<table></table>標簽的cellspacing進行賦值可以調整單元格與單元格之間的空間距離。
示例代碼如下：
<table border="1" width="100%" cellspacing="50">頁面效果如下：
下面我們刪除cellspacing="50"這段代碼看看變化，如圖：
通過對比，大家應該明白cellspacing這個屬性的作用了吧。
通過為<table></table>標簽的cellpadding進行賦值可以調整單元格邊框與單元格內容之間的空間距離。
示例代碼如下：
<table border="1" width="100%" cellspacing="10" cellpadding="20">頁面效果如下：
通過與上圖對比，我們不難發現變化。
設置表格顏色
這里我們要介紹一個全局屬性style，對，你沒看錯！就是freestyle的那個style！英文翻譯過來是"樣式"、"風格"的意思。我們通過這個屬性可以為表格設置顏色。實際上，可以為任何html元素設置顏色、大小、排列等不同屬性！
值得一提的是把style信息如果寫到一個獨立文件中，并保存為css文件，就是以后我們要學的CSS層疊樣式列表了。
這里我們先來簡單了解一下它作為html的一個全局屬性的用法。
示例代碼如下：
<table border="1" width="100%" cellspacing="10" cellpadding="20" style="background-color: #00ffff;">頁面效果如圖所示：
我們來分析一下這段代碼，寫法和其他屬性大同小異。
首先也是才有"屬性"="數值"的寫法，具體是：style=""
是不是和其他屬性寫法一樣？
但是到了雙引號里面就不同了，比如width屬性只需要為其賦值就可以，比如width="100%"。
而style是在雙引號里面再指定屬性。例如：style="background-color"。
然后我們再為background-color（背景顏色）屬性賦值。
這時，賦值的寫法就發生變化了，不是使用=號，而是使用：。
例如style="background-color ： #00ffff；"
大家注意的是為其賦值后，要用；結尾。這個；必須要添加，因為，通過style可以指定多個不同的樣式屬性，在指定多個樣式屬性時，我們使用；分割。
#00ffff這個符號是色彩的16進制表示方法，這個顏色是藍色。
#000000這個符號的顏色是黑色。
#ffffff這個符號是白色。
這個顏色的算法我們會在下一期中詳細講解，感興趣的小伙伴請關注！
大家想一想。如何為一列單元格指定背景顏色呢？
示例代碼如下：我們為表格標題欄賦予綠色。
<tr style="background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>頁面效果如圖所示：
下面我們為"一列一行"、"二列一行"賦予紅色。
示例代碼如下：
<tr>
<td style="background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style="background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>頁面效果如下：
今天的內容到此結束了，一下是今天示例的全部代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%" cellspacing="10" cellpadding="20" style="background-color: #00ffff;">
<caption>表格標題</caption>
<tr style="background-color: #00ff00;">
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td style="background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style="background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>明天將繼續為大家講解頁面制作中16進制的顏色指定方式和另外一種表格顏色指定方式。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
