自適應(yīng)網(wǎng)頁制作
提問問題
列表
-
如何把一個(gè)pc頁面自適應(yīng)手機(jī)屏幕
查看答案>>
-
dreamweaver cs6 中設(shè)置網(wǎng)頁自動(dòng)適應(yīng)屏幕大小的代碼?
查看答案>>
-
html5如何使網(wǎng)頁大小自動(dòng)與顯示屏
查看答案>>
-
html頁面 自適應(yīng)pc端 屏幕大小 怎么設(shè)置
查看答案>>
-
html頁面怎么自適應(yīng)
查看答案>>
-
關(guān)于網(wǎng)頁制作大小與分辨率的關(guān)系
查看答案>>
-
網(wǎng)頁設(shè)計(jì)：怎么讓frame的高度自適應(yīng)？？
查看答案>>
-
html手機(jī)頁面的字體怎么設(shè)置隨屏幕的大小變化頁變化？
查看答案>>
-
怎么在做網(wǎng)頁的時(shí)候讓背景圖片根據(jù)屏幕的分辨率而拉伸從而適應(yīng)屏幕大小
查看答案>>
-
html頁面怎樣能夠自適應(yīng)電腦屏幕寬度？
查看答案>>
如何把一個(gè)pc頁面自適應(yīng)手機(jī)屏幕
無論是電腦還是手機(jī)，要做到自適應(yīng)屏幕，其實(shí)都是一樣的。首先，在網(wǎng)頁代碼的頭部，加入一行viewport標(biāo)簽<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />viewport是網(wǎng)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。即讓viewport的寬度等于物理設(shè)備上的真實(shí)分辨率，不允許用戶縮放。其次：網(wǎng)頁寬度css一定要使用百分比width: xx%;，不能用絕對(duì)像素。當(dāng)然可以用width:auto;第三，流動(dòng)布局.left{float: left;width: ***%;}第四，選擇加載css這是自適應(yīng)的關(guān)鍵部分.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* 設(shè)置了瀏覽器寬度不小于1201px時(shí) abc 顯示1200px寬度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 設(shè)置了瀏覽器寬度不大于1200px時(shí) abc 顯示900px寬度 */ @media screen and (max-width: 901px) { .abc {width: 200px;} } /* 設(shè)置了瀏覽器寬度不大于901px時(shí) abc 顯示200px寬度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 設(shè)置了瀏覽器寬度不大于500px時(shí) abc 顯示100px寬度 */ 需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前），這樣是因?yàn)檫壿嬯P(guān)系，@media 判斷CSS排錯(cuò)將導(dǎo)致判斷失效。第四，圖片自適應(yīng)img { max-width: 100%;}老版本的IE不支持max-width，所以只好寫成：img { width: 100%; }篳五、采用相對(duì)字體大小字體也不能使用絕對(duì)大?。╬x），而只能使用相對(duì)大?。╡m）。這里最重要的，是第三條和第四條，也就是采用流動(dòng)布局和css選擇加載。祝你好運(yùn)！
dreamweaver cs6 中設(shè)置網(wǎng)頁自動(dòng)適應(yīng)屏幕大小的代碼?
這個(gè)適應(yīng)的話，應(yīng)該說的是能相對(duì)瀏覽器顯示區(qū)居中對(duì)么？？？如果是的話，我給你舉例一下，你這樣寫就行了：<div style="background:black;width:300px;height:200px;margin:auto;"></div>把這個(gè)代碼弄到你的<body>區(qū)，應(yīng)該就能自動(dòng)適應(yīng)了。如果你說的“自動(dòng)適應(yīng)”不是這個(gè)意思，那你再，當(dāng)然，HI我或Q我也可以。
QQ?
我的資料里有寫，這不讓說Q號(hào)的樣子。
html5如何使網(wǎng)頁大小自動(dòng)與顯示屏
在頭部<head></head>里加上<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">這句話，可以保證網(wǎng)頁不能被縮放。例如：1234567<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><title>標(biāo)題</title><head><body><body>
html頁面 自適應(yīng)pc端 屏幕大小 怎么設(shè)置
使用媒體查詢，參考bootstrap里面的設(shè)置，或者直接使用bootstrap框架吧，根據(jù)瀏覽器的寬度自動(dòng)設(shè)置寬度的媒體查詢代碼實(shí)例@media only screen and (max-width: 500px) {.gridmenu {width:100%;}.gridmain {width:100%;}.gridright {width:100%;}}
html頁面怎么自適應(yīng)
一、 自然拉伸如果你的網(wǎng)站結(jié)構(gòu)沒有用到大量的圖形來銜接，主要由表格來定結(jié)構(gòu)，那么你就可以使用該方法。非常適用于主要由表格、文字來表達(dá)信息的簡(jiǎn)單的網(wǎng)頁頁面。制作表格時(shí)，只要你把表格的寬度屬性定義為100% ，表格就會(huì)根據(jù)分辨率的不同自行調(diào)整寬度。二、 固定居中在800×600分辨率下制作的網(wǎng)頁在1024×768分辨率的機(jī)器上打開，整個(gè)網(wǎng)頁就會(huì)跑到左邊；1024×768分辨率的網(wǎng)頁在800×600分辨率的機(jī)器上有時(shí)也會(huì)變得"不堪入目"。兩種分辨率各做一個(gè)吧？做起來費(fèi)勁。所以目前普遍采用的方法是固定居中法！現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600的分辨率，所以我們一般可以以此分辨率為主。只要在網(wǎng)頁原代碼的<body>后緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個(gè)問題這是要注意一下，第一個(gè)要注意的是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設(shè)的是百分比，那么使用大于800×600的像素時(shí)，網(wǎng)頁就會(huì)拉寬，這樣網(wǎng)頁可能會(huì)變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時(shí)不會(huì)出現(xiàn)滾動(dòng)條。還有一點(diǎn)要注意的是不能用DW中的層來定位。
關(guān)于網(wǎng)頁制作大小與分辨率的關(guān)系
呵呵，我來回答你的問題吧。1：分辨率的問題?，F(xiàn)在PC端大部分的網(wǎng)站都采用固定寬度、高度自適應(yīng)、并居中的布局方法，寬度一般都是1000PX左右。這已經(jīng)兼容絕大部分的分辨率了，至于極個(gè)別的分辨率的兼容性，要么舍棄掉，要么就對(duì)該分辨率重新設(shè)計(jì)一個(gè)版面。總的來說，PC端的分辨率，樓主不需要其有多大的疑慮，感覺有點(diǎn)太過憂慮。當(dāng)你對(duì)網(wǎng)頁制作更加深入以后，你會(huì)發(fā)現(xiàn)你的擔(dān)心是多余的。2：你說自動(dòng)鋪滿全屏。他沒采用第一種布局方式，而是采用定位的方式布局的。3：網(wǎng)頁在瀏覽器和DW軟件顯示有差異，你無需管網(wǎng)頁在DW軟件中的顯示結(jié)果，顯示結(jié)果均由瀏覽器顯示結(jié)果為基準(zhǔn)。因?yàn)橛脩羰褂脼g覽器訪問你的網(wǎng)站。至于為什么會(huì)有差異，DW畢竟只是一個(gè)軟件而不是瀏覽器。
那么定位的方式布局步驟是什么？我怎么設(shè)置。
用position這個(gè)屬性來定位，絕大部分應(yīng)該是用到的absolute;但也不一定全部，這個(gè)需要根據(jù)效果來布局的。網(wǎng)站不一樣，方法肯定不一樣。多多練習(xí)你就會(huì)知道了。~~
網(wǎng)頁設(shè)計(jì)：怎么讓frame的高度自適應(yīng)？？
可以用jQuery控制// 獲取窗口的高度var win_h = $(window).height();$(".xx").height(win_h);// 窗口變化事改變高度$(window).resize(function(event) { // 獲取窗口的高度 var win_h = $(window).height(); $(".xx").height(win_h);}
html手機(jī)頁面的字體怎么設(shè)置隨屏幕的大小變化頁變化？
手機(jī)響應(yīng)式布局，是獲取屏幕尺寸，在某個(gè)區(qū)間用一種css，另個(gè)區(qū)間用另一種css。需要用@media寫多份css的。無法做到真正的隨屏幕變化而變化。而<meta name="viewport" content="width=device-width" />的用法是隨著屏幕的大小，自動(dòng)把頁面自適應(yīng)到屏幕的大小。這個(gè)是管用的。em是字體的寬度，也就是一個(gè)字體寬12px，那么em=12px；字體為15px，em=15px；一般用來動(dòng)態(tài)控制字體外的區(qū)塊大小去適應(yīng)字體，而不是用來設(shè)置字體的大小的。例如：<p style="width: 12em;">
<!-- / 無論這里設(shè)置的字體多大，寬度只會(huì)容納12個(gè)字 / -->
</p>如果<meta name="viewport" content="width=device-width" />沒效果，建議你用圖片貼出來，看看你想要的具體效果是什么。
怎么在做網(wǎng)頁的時(shí)候讓背景圖片根據(jù)屏幕的分辨率而拉伸從而適應(yīng)屏幕大小
可以設(shè)置圖片的寬度和高度都為100%，之后可自適應(yīng)屏幕大小。舉例：<div class="zj02" style ="width:100%;height:100%;overflow:hidden;"><img src="zj_01.gif" /></div>；此時(shí)圖片即可全屏幕顯示，不會(huì)出現(xiàn)”超寬“現(xiàn)象。
html頁面怎樣能夠自適應(yīng)電腦屏幕寬度？
網(wǎng)友們上網(wǎng)通常會(huì)采用800×600、1024×768兩種分辨率，由于網(wǎng)頁不是用來給自己看的，所以我們必須讓自己的網(wǎng)頁能夠兼顧這兩種情況，讓不同分辨率設(shè)置的網(wǎng)友都能夠看到一個(gè)排版美觀正確的網(wǎng)頁。一、 自然拉伸如果你的網(wǎng)站結(jié)構(gòu)沒有用到大量的圖形來銜接，主要由表格來定結(jié)構(gòu)，那么你就可以使用該方法。非常適用于主要由表格、文字來表達(dá)信息的簡(jiǎn)單的網(wǎng)頁頁面。制作表格時(shí)，只要你把表格的寬度屬性定義為100% ，表格就會(huì)根據(jù)分辨率的不同自行調(diào)整寬度。二、 固定居中在800×600分辨率下制作的網(wǎng)頁在1024×768分辨率的機(jī)器上打開，整個(gè)網(wǎng)頁就會(huì)跑到左邊；1024×768分辨率的網(wǎng)頁在800×600分辨率的機(jī)器上有時(shí)也會(huì)變得"不堪入目"。兩種分辨率各做一個(gè)吧？做起來費(fèi)勁。所以目前普遍采用的方法是固定居中法！現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600的分辨率，所以我們一般可以以此分辨率為主。只要在網(wǎng)頁原代碼的<body>后緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個(gè)問題這是要注意一下，第一個(gè)要注意的是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設(shè)的是百分比，那么使用大于800×600的像素時(shí)，網(wǎng)頁就會(huì)拉寬，這樣網(wǎng)頁可能會(huì)變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時(shí)不會(huì)出現(xiàn)滾動(dòng)條。還有一點(diǎn)要注意的是不能用DW中的層來定位。三、 兵分兩路如果你的網(wǎng)頁不經(jīng)常更新，而且對(duì)頁面效果極其在意，那好，你就設(shè)計(jì)兩個(gè)頁面，分別對(duì)應(yīng)800×600和1024×768兩種分辨率。然后根據(jù)不同的分辨率進(jìn)行跳轉(zhuǎn)就行了。例如：<script LANGUAGE="JavaScript">function redirectPage() {var url_else = "http://www.163.com/";var url_800x600 = "http://www.sohu.com/";var url_1024x768 = "http://www.sina.com.cn/";var url_1366x768 = "http://www.qq.com";if ((screen.width == 800) && (screen.height == 600))window.location.href= url_800x600;else if ((screen.width == 1024) && (screen.height == 768))window.location.href= url_1024x768;else if ((screen.width == 1366) && (screen.height == 768))window.location.href= url_1366x768;elsewindow.location.href= url_else;}</script>
熱門問答
- 模版還是模板
- 免費(fèi)建站
- 淘寶網(wǎng)頁是哪個(gè)公司做的
- 免費(fèi)制作企業(yè)
- 簡(jiǎn)單個(gè)人網(wǎng)站模板
- 制作網(wǎng)站的的網(wǎng)站
- 怎么學(xué)網(wǎng)頁設(shè)計(jì)
- html模板文件
- 手機(jī)網(wǎng)站的優(yōu)化
- 什么是排版設(shè)計(jì)
- 廣告公司網(wǎng)站制作
- 網(wǎng)站優(yōu)化是什么
- 怎么用手機(jī)制作簡(jiǎn)歷
- 武漢建設(shè)網(wǎng)站
- 網(wǎng)站建設(shè)公司怎么樣
- seo優(yōu)化培訓(xùn)
- 網(wǎng)站的建設(shè)哪家好
- 制作簡(jiǎn)歷圖片
- 什么是網(wǎng)絡(luò)推廣優(yōu)化
- 網(wǎng)頁制作學(xué)那些
