手機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% 然后計算設計稿的圖片
![](https://img.51dongshi.com/20210302/wz/91392752.jpg)
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% 然后計算設計稿的圖片
标签:福寿螺时间:2024-09-11 09:24:02
标签:深中通道通车时间:2024-07-01 11:16:29
标签:肺炎养臭水时间:2024-06-06 10:02:27