Membuat Template Website Responsive All Devices Dengan CSS Media Quires

Publish Date : 27-04-2016 , dibaca 5637 kali, Hari ini dibaca : 1 kali ,0 comments

Cara Untuk membuat template website menjadi responsive di semua device kita bisa memanfaatkan media quires di css, Pasti kita sudah mengetahui dengan perkembangan teknologi sekarang ini , user bisa mengakses web tidak hanya menggunakan laptop/ komputer pc, melainkan sudah bisa menggunakan Tablet, smartphone, dan lain sebagainya.

Berikut ini media quires responsive untuk semua devices,

Meta Tag Untuk Website Responsive

Sebelum membuat media quires dengan css, terlebih dahulu kita harus menempatkan code dibawah ini di antara tag <head> code </head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Media Quires CSS3 untuk Membuat Website Responsive

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait &amp; landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}