Kadang ketika kita sedang sharcing dan masuk ke website yang kita masuki kadang tampilannya hanya bisa dibuka di komputer saja hal ini membuat anda jadi malas untuk membuka post- post berikutnya yang ada di blog atau di website tersebut.
Dan dipostingan kali ini saya akan memberikan Cara Membuat Tamplate Responsive Sendiri,
Pada dasarnya membuat tampilan blog menjadi rebonsive sangat mudah kita hanya perlu merubah satuan pixel menjadi satuan persen serte memanfaatkaan media queris.
Tak perlu Panjang lebar berikut ini adalah Cara Membuat Tamplate Responsive Sendiri :
1. Cara yang pertama adalah dengan memasang meta tag di bawah ini diatas kode </head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Untuk perhatian MS Internet Explore Versi 8 dan yang kebawah tidak suprot dengan tag diatas tapi anda jangan khawatir saya akan memberikan solusi dengan menggunakan bantuan respond.js maupun dengan media queris.js dengan menggunakan meta tag berikut.
.<!--[if lt IE 9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Cara yang kedua adalah merubah ukuran pixel menjadi persen seperti contoh dibawah ini
.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}
Kode scrip diatas juga digunakan untuk menghitung ukuran teks ( Font Size) katakanlah konteks normal untuk ukuran font didalam body adalah 15 pixel. dan apabila anda ingin menetapkan H1 hadus dengan ukuran 24 pixel maka anda harus mengganti dengan satuan em dengan carmenghitung sebagai berkut :
24 px/16 px = 1, 5 em
Dengan gaya CSS maka akan didapat kode seperti dibawah ini :
h1 {
font-size: 1.5em;
}
font-size: 1.5em;
}
3. cara yang ketiga adalah dengan mengatur diversi tablate atau smartphone dengan menggunakan media queris caranya adalah kita memasang media queris berikut:
float none dengan ukurannya menjadi 100 %
.@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}
Ini adalah Cara Membuat Tamplate Responsive Sendiri , gimana mudahkan Cara Membuat Tamplate Responsive Sendiri. Dan kalau ada masalah silahkan ditanyakan aja Mas bro, sekian tutorial Cara Membuat Tamplate Responsive Sendiri kali ini semoga bermanfaat dan meanambah pengetahuan anda.
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon