做乙個pc端的網頁,設計圖是1920x1080的. 要在常見屏上顯示正常(比例正確可) 1280x720 1366x768 1440x900 1920x1080
使用了幾種辦法
1.內容在一屏內顯示的,採用了(內容框)上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是在中間,看起來較正常
2.長,寬,left,top,right,bottom都採用了rem,並且html的font-size設定的是100px一是覺得計算方便,二是如果設為10px,谷歌會不相容.此時body的font-size設定為正常值,12px.不然的話,其它的dom都會繼承html的100px的font-size,導致效果巨大.
3.當瀏覽器視窗變化時,內容的大小以及相對位置也會相應變化,這個依靠js修改html的font-size值實現.如下:
$(window).resize(function ()// 繫結到視窗的這個事件中
);計算font-size的邏輯是:
當設計圖是1920時,規定html的font-size的值是100. 也就是,當瀏覽器視窗調整到1920px時,1rem=100px,如果要設定乙個16px(1920設計圖時)的字型,那麼rem設定值是0.16.
當視窗調整到非設計圖的寬度如winwidth時,html的font-size值是:(100/1920)*winwidth.也就是說,1920下font-size是100px.那麼winwidth下,按比例計算.
或者可以這樣:視窗寬1920時,font-size是100px,那麼winwidth時,相當於視窗變化為1920時的 (winwidth / 1920).根據比例公式,winwidth時的font-size就是 (winwidth/1920)*100
winwidth / 1920 = font-size(px) / 100
100 / 1920 = font-size(px) / winwidth 這個公式容易理解
如果調整視窗大小,會發現html的font-size值在變化,同時,使用rem設定的dom也在變化.因為rem正是參考html的font-size值來計算的
4.如果是在手機上,平板電腦上,更要使用rem,由於手機上一般不會調整瀏覽器大小,所以可以在頁面載入時,設定一次即可
$(function())
5.使用rem是個有效的辦法,加上bootstrap swiper這些工具,可以比較省事的做出一些簡單的效果
手機端適應 vue專案移動端 pc端適配方案
vue專案移動端 pc端適配方案 npm i lib flexible s npm i postcss px2rem s 簡要介紹這兩個包的用途 flexible會為頁面根據螢幕自動新增標籤，動態控制initial scale，maximum scale，minimum scale等屬性的值。pos...
pc端和手機端禁用滾動條
pc端 禁止出現滾動條 html,body 禁止縱向滾動條 禁止橫向滾動條overflow屬性 檢索或設定當物件的內容超過其指定高度及寬度時如何顯示內容 overflow auto 在需要時內容會自動新增滾動條 overflow scroll 總是顯示滾動條 overflow x hidden 禁止...
移動端專案如何在手機上檢視效果
很多時候我們需要在真機上除錯，進行 的維護修改，如何在手機上檢視呢？我們拿vue來說，1.在vue的config index.js檔案中我們可以看到專案啟動的乙個埠號 上圖網域名稱是我進行修改後的，大家開啟後應該會預設顯示localhost 2.window r，輸入cmd進入控制台，然後輸入命令i...