Pengertian Website Responsive
pengguna internet sekarang tidak hanya dari pc saja dengan layar dan dimensi itu itu saja , semakin berkembangnya teknologi banyak cara orang untuk mengakses informasi dari internet . bisa dengan pc, smartphone maupun tablet . memiliki resolusi yang berbeda pula . jika teknik membuat website jaman dulu biasanya membuat 2 desain . yaitu dengan desain khusus mobile yang biasanya diberi sub domain M ,. tetapi sekarang masalahya sekarang banyaknya jenis screen internet (smartphone, tablet, lanskape, portait dll) tak memungkinkan bagi kita untuk membuat berbagai macam website dengan sub domain untuk memenuhi itu semua . didukung dengan kemampuan teknologi yang semakin canggih saat ini maka sekarang ada website yang tak perlu membuat secara manual, maka website otomatis akan menentukan ukuran layar yang digunakan untuk mengakses website tersebut
Kelebihan dan Kekurangan
diantara kelebihan website responsive adalah simpel, kita tak perlu membuat banyak website (misal untuk tampilan mobile sendiri, untuk pc dll) . karena otomatis akan menyesuaikan . sedangkan kekurangannya adalah untuk gambar dll yang di load ketika membuka di smartphone akan sama dengan yang di load ketika membuka di pc , tetapi untuk masalah ini sepertinya sudah bukan lagi menjadi masalah karena perangkat smartphone masa kini tak kalah saing dengan pc
Cara Menggunakannya:
teknik yang digunakan menggunakan html dan css pada umumnya, kita perlu mengatur css untuk tiap perangkat . berikut contohnya:
*Smartphones (portrait and landscape) ———– */
@media only screen
and (min-width : 320px)
and (max-width : 480px)
{ /* Styles */ }
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px)
{ /* Styles */ }
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px)
{ /* Styles */ }
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{ /* Styles */ }
/* iPads (landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape)
{ /* Styles */ }
/* iPads (portrait) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait)
{ /* Styles */ }
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px)
{ /* Styles */ }
/* Large screens ———– */
@media only screen
and (min-width : 1824px)
{ /* Styles */ }
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{ /* Styles */ }
berikut adalah pengertian Pengertian Website Responsive . apabila ada pertanyaan silahkan komentar dibawah 🙂