最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

手機web適應各種屏幕,不出現(xiàn)上下和左右的滾動條大神們來幫忙了_html/css

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 16:00:45
文檔

手機web適應各種屏幕,不出現(xiàn)上下和左右的滾動條大神們來幫忙了_html/css

手機web適應各種屏幕,不出現(xiàn)上下和左右的滾動條大神們來幫忙了_html/css_WEB-ITnose:rt 現(xiàn)在有一個手機web , psd 設計稿是 640x1130 (w/h) 的, 現(xiàn)在要求是能在各種大小屏幕的手機里,不出現(xiàn)滾動條, 設計稿里的圖片和按鈕不被拉長和壓扁,就是要等比縮放; 我第一次的做法就是 width:100%, height:100% 然后計算設計稿的圖片
推薦度:
導讀手機web適應各種屏幕,不出現(xiàn)上下和左右的滾動條大神們來幫忙了_html/css_WEB-ITnose:rt 現(xiàn)在有一個手機web , psd 設計稿是 640x1130 (w/h) 的, 現(xiàn)在要求是能在各種大小屏幕的手機里,不出現(xiàn)滾動條, 設計稿里的圖片和按鈕不被拉長和壓扁,就是要等比縮放; 我第一次的做法就是 width:100%, height:100% 然后計算設計稿的圖片

rt
現(xiàn)在有一個手機web , psd 設計稿是 640x1130 (w/h) 的, 現(xiàn)在要求是能在各種大小屏幕的手機里,不出現(xiàn)滾動條, 設計稿里的圖片和按鈕不被拉長和壓扁,就是要等比縮放;

我第一次的做法就是 width:100%, height:100% 然后計算設計稿的圖片占的百分比寫的css 樣式,在不同的手機里,頁面里元素均出現(xiàn)不同的拉長或壓扁 ,被打回重做

我現(xiàn)在的思路是 在 body 里先做一個 長寬比為 1136/640 的容器,然后把頁面中的元素在這個容器里,在按百分比布局,現(xiàn)在問題是 這個1136/640 的容器,什么時候給他設置長寬比? 我的實現(xiàn)步驟就是用 zepto.js

$(document).ready(function(){ // code //...在屏幕中間,取出一個面積最大的 1136/640的容器,然后使其居中,左右留白})


但這樣一來,頁面dom都加載完了,才做這個動作,有點晚了, 我下面的想法就是之前在 1136/640 容器里的標簽,全部寫在 js 里, 等容器設置好 1136/640 這個長寬比后,再將標簽 append 到 這個容器里

不知道這個方法可行不,這樣一來,后臺程序該怎么寫,我覺得這是個很糟糕的設計,求大神們給出寶貴的意見、建議、想法或者解決方案,不勝感激


回復討論(解決方案)

請搜 響應式設計

簡單的
復雜的用css媒體查詢試試

@ 二樓, 三樓
這些都有的,我有接觸, 但是目前市面這么多手機,媒體查詢 如何是好啊
可能是我沒把問題描述清楚:

psd 設計稿只有 640 x 1136 (wxh), 要求是

1.設計稿中的內(nèi)容全屏顯示,允許左右留白,下方留白
2.不能出現(xiàn)滾動條
3.在各種不同尺寸的手機上,設計稿的元素不能被壓縮 拉伸,實現(xiàn)等比縮放

如下圖, 如果響應式設計、 媒體查詢能夠?qū)崿F(xiàn)的話,該怎么設置分界點,麻煩講一下詳細的步驟,謝謝

用js計算吧,設備高度減去頭尾高度就是內(nèi)容區(qū)域的高度了,設備寬度即內(nèi)容區(qū)域?qū)挾龋缓蟀丛O計圖的圖片比例,計算到底是寬度較小還是高度較?。ū热鐖D片寬高比例2:3,即使內(nèi)容區(qū)域尺寸為220:300,仍然認為是高度較小),然后以較小的那個尺寸計算圖片尺寸即可(比如按高度計算,則不設置寬度令其自動縮放)
至于居中這些,相信不會有難度

用js計算吧,設備高度減去頭尾高度就是內(nèi)容區(qū)域的高度了,設備寬度即內(nèi)容區(qū)域?qū)挾?,然后按設計圖的圖片比例,計算到底是寬度較小還是高度較?。ū热鐖D片寬高比例2:3,即使內(nèi)容區(qū)域尺寸為220:300,仍然認為是高度較?。?,然后以較小的那個尺寸計算圖片尺寸即可(比如按高度計算,則不設置寬度令其自動縮放)
至于居中這些,相信不會有難度



嗯 , 謝謝,基本我們找到共同點了,我也是這么考慮的,但是代碼實現(xiàn),我應該是在dom 加載完后 讀取 顯示區(qū)域的寬 高比吧,若用兩套css , 就是瀏覽器寬高比 大于圖片寬高比的時候,一套css, 小于的時候,另一個套css, 如何引用所需要的樣式文件呢 ?

百分比圖片變形的話,你只要給圖片設置寬度百分比,不要設置高度就好了

外層容器

中(9宮格子)

布局


假定 上 中 下 三個區(qū)域 全部是相對 外層容器
上中下 三個 全部用百分比設置
9宮格全部是 33%寬高

1)你要控制的就是 外層容器的大小 css或者js 隨便
2) 全部等比縮放是不可能的 比如 上 那幅圖 在等比例 拉伸情況下 必然發(fā)生 有部分邊緣不能顯示

另外 要考慮 設備橫過來時候 外層容器大小的定義

是繼續(xù) 滿屏 還是 高度滿屏 寬度比例拉伸劇中 還是 設置 min-height

百分比圖片變形的話,你只要給圖片設置寬度百分比,不要設置高度就好了



嗯嗯,主要問題是對整個頁面的設置

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

手機web適應各種屏幕,不出現(xiàn)上下和左右的滾動條大神們來幫忙了_html/css

手機web適應各種屏幕,不出現(xiàn)上下和左右的滾動條大神們來幫忙了_html/css_WEB-ITnose:rt 現(xiàn)在有一個手機web , psd 設計稿是 640x1130 (w/h) 的, 現(xiàn)在要求是能在各種大小屏幕的手機里,不出現(xiàn)滾動條, 設計稿里的圖片和按鈕不被拉長和壓扁,就是要等比縮放; 我第一次的做法就是 width:100%, height:100% 然后計算設計稿的圖片
推薦度:
  • 熱門焦點
專題
Top
fffffffffffff

抖音扫码关注

手机端二维码

每天分享百科知识!