移動端適配問題

孫淑建發布于2019-04-23 13:23 / 2610人閱讀

摘要：讀設備寬度，動態設置標簽的屬性中的值網易的做法網易的做法現在的設計稿都是寬度的寬，那要想實現樣式設計圖這種比較方便的折算方式，就要設置成也就是說總結總結是為了實現移動端自適應布局。

適配問題

怎么適配iphone6
1px問題

為什么頁面與設計稿會出現偏差？

dpr=設備像素/ css像素，只有dpr等于1的時候，實際效果和設計稿的尺寸比例才是1:1。

因為iPhone6的DPR（設備像素比）為2，設備像素為750，所以iPhone6的理想視口尺寸為375px。

因為設計稿是基于設備像素，頁面是基于css像素的。css中的寬度是基于理想視口的（寬度375px），設計圖上是基于設備寬度750px，所以尺寸不對。

怎么處理？

init-scale=0.5 。
缺陷：但是寬度不能自適應

??rem大法

基于html標簽的font-size設置的

手淘的做法：

把縮放尺寸設置成dpr的倒數。

讀設備寬度，動態設置meta標簽的 content屬性中的maximun,minimum,user-scable值

網易的做法

現在的設計稿都是750px寬度（p6的寬），那要想實現 css樣式：設計圖=1：100 這種比較方便的折算方式，font-size就要設置成7.5px；

也就是說1rem = 7.5px

總結

rem是為了實現移動端自適應布局。通過在html元素下設置font-size定義。

另外，手淘的做法是通過判斷設備的dpr，將縮放規模scale設置為dpr的倒數，再用js動態設置meta標簽的content屬性和font-size基準值的大小。

網易的做法是，禁用用戶縮放，scale始終為1，將font-size設置為625%，即 1rem=100px。

1px問題

如何實現移動端的1px邊框

方法一：`transformY:scale(50%)`

方法二：

border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 圖片地址 上下剪切 左右剪切 上下邊寬 左右邊寬 圖片拉伸

vm/vh+rem大法

vm/vh是未來的趨勢

rem方式弊端：需要動態計算根字體大小

做法：用vm/vh來計算根字體大小，剩下的自適應布局依舊按照rem的方法

用vm/vh做適配頁面

??關于vm/vh

1. 與%百分比的區別

vm/vh 是基于視窗的
%基于父元素

2. 使用場景

隨著頁面不同，文字圖片縮小放大（適配頁面）

3. 與rem的區別

vm/vh沒有最大、最小寬大的限制（設備很小的時候，圖文會縮得特別特別小……）

措施：

1.解決背景過小問題

body{
    min-width:xxx px;
    max-width: xxx px;
}

2.媒體查詢限制根文字大小（解決文字過小問題）

html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同時，通過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }

云服務器 GPU云服務器移動端適配移動端適配方案移動端適配 js 適配問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1812.html

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。前言 2018年最后的法定假期都已經結束了，我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學可以參見大漠老師的這兩篇文章使用Flexible實現手淘H5頁面的終端適配和再...

wangbinke 2019-08-29 16:56 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。前言 2018年最后的法定假期都已經結束了，我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學可以參見大漠老師的這兩篇文章使用Flexible實現手淘H5頁面的終端適配和再...

tianren124 2019-08-23 12:21 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0