1、在移動端設計稿為1080p的時候,用rem布局。怎麼計算寬度和字體大小?
原文鏈接:http://caibaojian.com/rem-and-px.html
1rem等於多少px呢?·
1rem等於html根元素設定的font-size的px值,假如我們在css裡面設定下面的css。
//code from http://caibaojian.com/rem-and-px.html
html{font-size:14px}
那麼後面的CSS裡面的rem值則是以這個14來換算,例如設定一個div寬度為3rem,高度為2.5rem.則它換算成px為width:42px.height:35px,同理,假如一個設計稿為寬度42px,高度為35px,則換成成rem,則是42/14=3rem,35/14=2.5rem。
如果css裡面沒有設定html的font-size,則默認瀏覽器以1rem=16px來換算。
來源:前端開發博客
這是我查看資料分享過來的,具體對不對要看題主測試之後的結果
2、網頁設計 自適應到移動端字體問題
首先你要明白,PC端和移動端的效果是不一樣的。PC端是大屏幕(譬如1280*960),移動端是小屏幕(譬如320×480),兩者的尺寸是存在差異的。所以比較直白的解釋就是PC端效果圖是大圖,移動端效果圖是小圖。如果是單純的網頁photoshop設計,視覺美觀就按照48px,因為兩者的圖其實是不一樣的。程序員在編輯代碼時,可能會採用em或者rem相對大小來設計,而不是採用px。
3、移動端web頁面設計用什麼字體
最好就是宋體,不要問我為什麼。因為這是默認字體
4、移動網頁設計的幾點注意事項
我設計幾個移動端的項目,算不上高手,但是總結就是:因為移動端的手機屏幕太多了,所以你必須的兼容大多數的屏幕,所以,最好是能夠在布局的時候就事先以自適應的方式來布局,不然在不同的手機上看你的網頁,運氣好還能見人,運氣不好,我就哇哈哈哈了。
然後就是記得唉頭部加上這兩句話
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
5、做手機網頁要考慮哪幾種尺寸呀
1、如果是比較復雜的頁面,我們只需要第一屏撐滿全屏,可以使用此方法。單獨定義html和body的樣式。【html,body{width:100%;height:100%;}】。
2、然後給DIV添加嵌套樣式【.bg{width: 100%;height: 100%;background: #ff0000;}】並在DIV中引入bgCSS【<div class="bg"></div>】保存頁面後可以看到此時div也撐滿屏幕了。
3、為了方便觀察,我們在添加一個不同顏色的DIV【<div class="content"></div>】並定義CSS【width: 10rem;height: 5rem;background: #ffea00;】。保存後網上滑屏,可以看到後添加的DIV也可以正常顯示啦。
4、在瀏覽器開發者模式下,可以切換手機的型號,不同型號手機屏幕比例是不一樣的哦,可以看到,從普通的16:9的屏幕切換到iphone7時,屏幕雖然變長了,但是下面的黃色div是不會顯示出來的。
5、切換到最新的全面屏iphoneX時,依然是紅色的div撐滿全屏的。
6、上滑屏幕後才會看到下面的其他div模塊,這樣就可以實現想要的效果了。
6、移動端web在設計時寬度尺寸是多少合適
基本上都是640吧,高度由於是專題,可以不受限制的
7、dreamweaver網頁設計中的字體是怎麼移動的?
主要就是這個marquee標簽。 你在試試下面的效果: 在網頁上可以方便地設置文字上下左右移動,控制文字左右移動的標點詞<marquee>,如: <marquee>文字在移動</marquee> 在瀏覽器中顯示時,文字在移動這幾個字左右移動。<marquee>還有一些重要的屬性。 direction:控制移動方向,可取left,right,up,down四個值; behavior:移動方向,可取scrdl(循環移動),slide(只走一圈),alternate(來回移動); loop:指定循環次數,不輸入表示無限循環 scrollamount:移動的快慢,整數越大則越快 scorlldelay:每移動一步之後的延時,單位毫米 height,width:移動區域的高忽然寬,單位像素 bgcolor:移動區域的背景色 onmouseover=this.stop() 滑鼠覆蓋時停止滾動 onmouseout=this.start() 滑鼠離開時開始滾動 如下面的代碼就上一個常見的實現向上滾動公告欄的原代碼; <marquee direction=up width=100 bgcolor=#336699 scrollamount=2>謝謝</marquee>
記得採納啊
8、手機端網頁設計尺寸多少
iPhone手機網頁的設計尺寸
iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI
安卓網頁的設計尺寸
320dp:一個普通的手機屏幕(240X320,320×480,480X800)
480dp:一個中間平板電腦像(480×800)
600dp:7寸平板電腦(600×1024)
720dp:10寸平板電腦(720×1280,800×1280)
ipad網頁的設計尺寸
iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI
9、網頁設計中如何讓字體的顏色隨著滑鼠的移動或者滑鼠經過字體時而改變?
樣式表的運用
在
中添加代碼
a:link
{
//滑鼠未經過時也就是網頁顯示的顏色
color:darkgreen;
text-decoration:none;//不顯示下劃線
}
a:hover
{
//滑鼠經過時也就是點擊時顏色
color:red;
position:relative;
top:1px;
//滑鼠經過時讓鏈接的文字上移一像素(動態效果就在這)
text-decoration:none;
}
a:visited
{
//滑鼠經過後也就是點擊鏈接後的顏色
color:blue;
position:relative;
top:1px;
text-decoration:none;
}
10、5移動網頁的設計稿尺寸應該是多少
html5移動端尺寸750*1334,還有720*1080都是可以的,如果要兼容蘋果和安卓的用750*1334的多一些