[英]How can i make the responsive design using CSS?
當我從智能手機或平板電腦查看時,如何制作響應式設計。 它應該正確對齊並在任何設備中顯示確切的輸出。這是我試圖在彈出窗口中實現的代碼。 我不知道如何使它作為基於CSS的響應。 任何建議都會很棒。
<div id="ptechsolfb">
<div id="fb-close"></div>
<div id="ptechsolfblike">
<div id="fbclose"></div>
<div id="ptechsolinside">
</div>
</div>
</div>
<style type="text/css">
#ptechsolinside {
background-image:url(https://www.google.com/images/srpr/logo4w.png);
background-repeat:no-repeat;
}
#ptechsolfblike {width:500px;height:500px; position:absolute;top:50%;left:50%;margin:-135px 0 0 -210px;border-width: medium medium 71px;}
#ptechsolinside {background-color:#FFF;}
#ptechsolinside { border-width: medium medium 71px; border-style: none; border-color: blue; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; margin-top: -4px; width: 500px; height: 500px; margin-left: 8px;}
</style>
這是小提琴
一些帶有媒體查詢的響應式網站
http://mediaqueri.es/
http://css-tricks.com/css-media-queries/
http://webdesignerwall.com/tutorials/css3-media-queries
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media screen and (min-width: 240px) and (max-width: 319px) {}
@media screen and (min-width: 320px) and (max-width: 480px) {}
@media screen and (min-width: 481px) and (max-width: 768px) {}
@media screen and (min-width: 769px) and (max-width: 959px) {}
在這里,我剛剛設置了媒體查詢,然后你必須寫這樣的其他人
@media屏幕和(最小寬度:240px)和(最大寬度:480px){}
使用CSS媒體查詢。
以下鏈接將幫助您了解有關它的所有信息。
你可以試試twitter bootstrap。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.