移動端開發

標籤：

1.pixel

iphone5說自己是640*1136的屏，那麼咱們在一個頁面中寫一個div是640*200px的樣子，但是會超出，為什嗎？
chrome調整時候會是320*568，為什嗎？

1.Retina屏
2.沒設定<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

ipone5說自己是640寬意思是說的是物理像素，是固定的一個單位，多大就多大

但是咱們開發時說的像素是邏輯像素，也就是瀏覽器使用的抽象的一個單位是可以根據不同的裝置去進行變大變小的

裝置像素縮放比DevicePixelRatio(DPR)，通過這個東西來控制邏輯像素和物理像素之間的關係的

邏輯像素640=裝置像素縮放比2*320像素

ipone5的裝置像素縮放比就是2

也就是說1邏輯像素==4物理邏輯，從一個方向上來說就是1:2的比例

一般的高清屏的dpr都是大於等於2的，腎6就是3的....所以那麼貴還是有道理的...

手機螢幕和pc的螢幕不一樣，是retina高清屏

2.viewport視圖

1.老以前的諾基亞時代，訪問一個pc網站的時候，只能訪問到左上的一部分；
1.一個pc端的頁面在移動端上也是可以把整個頁面都示範完的，只不過會縮小顯示，但是經過處理，就可以按照設計的想法
在移動端以不同的方式來示範，也就是響應式的技術

其實這個時候的處理就是要把整個頁面給放到一個叫做viewport的東西裡面，然後再把viewport給縮放一下，最後再渲染到
手機螢幕中

3.meta標籤

通過meta標籤來改變咱們viewport的一些東東，就可以使咱們的頁面在移動端渲染的更完美

width n device-width 設定寬度為裝置的寬度，當然也可以設定別的
initial-scale 1.0 設定頁面的縮放，
也就是viewport的縮放比例，
這個知識點不重要，不要管了，就記住設成1就好了
minimum-scale 設定最少縮放 不用
maximum0scale 設定最多縮放 不用
user-scalable 使用者能否用手指來縮放

*1.手機螢幕和咱們理解的pc螢幕不一樣，是retina屏 他說的是物理像素，咱們說的是邏輯像素
*2.要做移動端的項目，或者是響應式的項目，必須加
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

 

4.移動布局

響應式：效能不是最優，因為樣式要寫很多，但是能減少重複開發

響應式百分比布局，和flex彈性布局安卓4.4

百分比 flex布局 vw vh rem
@media

媒體查詢來適應不同的固定寬度設計，會從一組樣式轉換為另一組樣式，平滑友好的轉換

*彈性圖片

這個圖片本身是有一個大小的吧，在做項目的過程中應該讓他根據螢幕的寬度去縮放，但是
不能超過自己的本身一個最大值，
.a img{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
圖片根據容器的改變而改變，不然加meta後，圖片都會是本來的大小

*5.特別樣式處理

高清圖片

在移動頁面上渲染圖片，為了避免圖片模糊，100*100的，在高清屏下是
用200*200的像素來處理；
但是一般是這樣的，設計師出的圖都是2倍於螢幕解析度的（基於ipone6 375*667）那麼實際的圖片就是750*1334
所以圖片咱們還是直接拿過來用就ok~
100*100 200*200

*如果盒子裡面放的是和盒子一樣尺寸的圖片的話，會失真，解決方案是，放兩倍於盒子尺寸的圖片；

1像素邊框
1像素邊框用2px來渲染，所以有這麼個方法；
.a{
width: 100px;
height: 100px;
border-top: 1px solid #333;
position: relative;
}
.a:after{
content: "";
position: absolute;
bottom: 0px;
width: 100%;
border-bottom: 1px solid #333;
transform: scaleY(0.5);
}

rem 根據根項目的字型大小來搞來搞去
html {
font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20÷16=125% */
}
}

vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
IE9+局部支援，chrome/firefox/safari/opera支援，ios safari 8+支援，
android browser4.4+支援，chrome for android39支援

 

多行文本溢出
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 

移動端開發