移動端不同解析度適配 使用flexible

2022-07-18 03:39:08 字數 419 閱讀 1064

使用方法:

lib-flexible庫的使用方法非常的簡單,只需要在web頁面的中新增對應的flexible_css.js,flexible.js檔案

或者直接載入阿里cdn的檔案:

容器或元件寬高主要使用單位rem,字型大小則不變仍然使用單位px

還有乙個約束是,如果針對iphone5 640*1136,因此我們限制最外層包裹的div最大寬度為 640px,表示10rem;

把視覺稿中的px轉換成rem的換算方法:要轉換的畫素值 / 640px * 10

Android不同解析度適配

適配可以分為 layout land 橫屏布局 layout port 豎屏布局 layout 1920x1080 或者layout land 1920x1080 layout port 1920x1080 注 如果適配的布局檔案中,沒有當前機型,當前機型會選擇相差最小的解析度的配置檔案進行適配 l...

網頁不同解析度適配

你大聲的嚷著你的手機解析度就是1920 1080的,這是你攢了足足兩個月的錢後在小公尺官網買的紅公尺手機,絕不可能有假。你寫了乙個寬為 960px 的 div,用手機的瀏覽器橫屏開啟後,你期望這個該死的 div 會和在電腦上的瀏覽器載入出來一樣的效果,只佔螢幕的一半。結果卻讓你納了血悶,明明電腦上解...

適配不同解析度螢幕

如今的螢幕解析度,小至320px iphone 大到2560px甚至更高 大顯示器 變化範圍極大。除了使用傳統的台式電腦,使用者會越來越多的通過手機 上網本 ipad一類的平板裝置來瀏覽頁面。這種情況下,固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性,其布局結構要做到根據不同的裝置及螢...