contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Template Website Responsive All Devices Dengan CSS Media Quires

Posted in HTML & CSS Life at 27 April 2016 With 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,

membuat website responsive dengan css3 media quires

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 */
}
▼ Download Source Code Dibawah Ini ▼


Artikel Terkait

Diskusi