ตัวอย่างการเขียน css for mobile

 

กำหนด ค่า

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/mobile.css” rel=”stylesheet” type=”text/css” />

 

เขียน css for mobile

@media only screen and ( min-width: 768px ) {

select#cat.postform,
.menumobile select{display:none;}
}
@media only screen and ( max-height: 150px ) {
div.lzblock {position: static;}

}

 

@media only screen and ( max-width: 768px ) {

}

 

@media only screen and ( max-width: 650px ) {

}

/* TABLET */
@media only screen and (min-width:640px) and (max-width:1023px) {

}
@media only screen and ( max-width: 350px ) {
* { max-width:100%; }
/* Page intro */
div.ContentArea .Logo{margin-right: auto;margin-left: auto;float: center;}
div.ContentArea .TheRBSC{width: 610px;font-size: 23px;margin-top: 0px;margin-bottom: 15px;height:auto;}
div.metro-panel{height: 95px;}
div.metro,
div.metro span,
div.metro .imgsimple
{height:auto;}
div.metrosingle{width: 92px;margin-left: 4px;}
div.metro .imgsimple{width:100%}
div.metro .imgdouble{padding-top:0px;}
div.ContentArea .Banner{height:auto;}
body div.AreaEnterSite .LeftSite{width: 47%;height:auto;}
body div.AreaEnterSite .RightSite{width:47%;height:auto;padding-left: 3px;background-color: #fff;}
div.AreaEnterSite .RightEntertSite a,
div.AreaEnterSite .LeftEnterSite a {display: block;font-size: 18px;padding-top: 10px;height: 26px;width: 275px;
background: url(https://dudamobile-themes.s3.amazonaws.com/direct/two-tone/icons/red/general_icon.png) no-repeat 7px 50%, url(https://dudamobile-themes.s3.amazonaws.com/direct/two-tone/arrow_white.png) no-repeat right 50%, url(https://dudamobile-themes.s3.amazonaws.com/direct/two-tone/bg_nav1.png) repeat-x 0px 0px, url(https://dudamobile-themes.s3.amazonaws.com/direct/two-tone/bg_red.png) repeat-y 100% #fff;
background-color: #fff;border-radius: 6px;}
div.RightEntertSite{height: 44px;width: 100%;margin-left: 20px;overflow: hidden;float: left;text-align: center;margin-right: 5px;}
div.AreaEnterSite .LeftEnterSite {width: 100%;margin-left: 10px;}
div.ContentArea .AreaEnterSite,
div.ContentArea{height:auto;}
div.AreaEnterSite .LeftEnterSite {margin-left: 20px;margin-top: 15px;}

/* End intro */

div.menu-wrapper ul{padding-left:0px;!important;}

div.Header{background-position: left -350px top;height: 219px;}
div#Welcome {padding-top: 13px;}
div#menu-wrapper ul {display: block;list-style: none;overflow: hidden;}
div.panel .container{padding: 0px 0px 0px 0px;}
div.screen,
div#preview1{max-width: 300px;max-height:128px;}
div.ContentArea .ImageSlide {height:auto;}
div.screen img.main-img{width: 100%;top: 0px !important;left:0px !important;}
div.ContentArea .Banner {margin-top:5px;}
div.ContentArea .TitleLeftCalendar{margin-left:0px;}
div.ContentArea .TitleLeftCalendar img{min-width: 980px;margin-left: -360px;}
div.ContentArea .LeftCalendar{margin-left:0px;}
div#calendar,
div#c_head {width: 100%;}
div#c_back, div#c_next{width: 15%;}
div#c_month {width: 70%;font-size: 14px;padding-top: 7px;font-style: normal;font-weight: bold;}
div#calendar li {width: 41px;}
div.calenderbottom{width:100%;padding-left:0px;}
div.calenderbottom img{height:auto;margin-top: 8px;}
span.c_today,
div#calendar li,
span.c_day,
div#calendar
{height: auto;}
div.ContentArea .LeftCalendar{height:240px;}

}

@media only screen and ( max-width: 550px ) {}