Dengan
meningkatnya jumlah pengguna pada perangkat mobile (smartphone, tablet
dan netbook), orang yang menggunakan query media untuk cepat merancang
ponsel-ramah situs versi. Agak
itu terkait dengan desain web responsif yang sering menawarkan konten
yang identik untuk setiap perangkat yang lebih kecil dari 1024 macam,
namun itu mengubah fokus ke situs Info memenuhi syarat didorong.
Untungnya, Blogger telah melangkah maju awal dengan memperkenalkan template mobile. Ini fitur dandy berguna dalam platform ini yang membuat blog kita cukup ramah dengan perangkat kecil dan konsol portabel. Selain itu, peningkatan diperbolehkan melalui CSS (Lihat di sini). Jadi, kenapa tidak saya mengaktifkan fitur ini?. Aku begitu bodoh ketika menggunakan CSS query media yang bukan. Mobile di Blogger?
Secara pribadi itu menyenangkan, pada kenyataannya, banyak untuk bekerja dengan untuk benar-benar menanggapi browser yang berbeda dan layar. Tata letak cair juga, membangun lebih tangguh daripada layout tetap. Itulah alasan template fluida masih kurang pada jumlah dibagi secara online.
Untuk membuat desain responsif, pertama, saya sudah mulai dengan template cairan yang digunakan persentase dan EMS daripada piksel. Nicely done tapi tidak sempurna bekerja di Opera karena blog saya menggunakan berbagai warna untuk latar belakang nya (misalnya menu utama). Semua persentase dibulatkan di Opera, jadi jelas selalu ada celah kosong. Saya akan menyimpulkan di sini yang menggunakan hanya satu warna latar belakang di seluruh tema Anda untuk template fluida.
Orang Satu hal lagi, saya telah melihat membuat kesalahan ketika mereka menempatkan banyak hal selain teks (widget, iklan, dll) pada sidebar. Ini semacam elemen telah didefinisikan lebar. Jadi, ketika sidebar fleksibel itu sendiri telah diubah ukurannya untuk mengikuti lebar browser, elemen-elemen hanya mengabaikan aturan.
Jadi, saya memutuskan untuk tinggal dengan lebar tetap sementara melaksanakan permintaan media untuk blog ini. Tapi dibandingkan dengan penggunaan persentase, saya sudah untuk menghitung ulang semua lebar terkait untuk setiap parameter sesuai dengan layar target.
Selanjutnya, untuk membantu bekerja dengan browser lintas, saya menaruh link ke CSS3-mediaqueries-JS yang dilaporkan membantu dalam memberikan pertanyaan media bahkan pada beberapa browser warisan (termasuk IE 5). Sertakan dalam header;
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </ script>
Masih di header, saya sudah memasukkan meta tag yang lain untuk menghentikan mengubah ukuran gambar iPhone simulator. Meskipun itu adalah utilitas yang besar untuk menyesuaikan gambar kita di layar kecil, semua teks akan diperkecil dengan itu.
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
Dan terakhir, pekerjaan menyenangkan dimulai dengan menambahkan stylings ekstra di bawah bagian CSS. Di sini, tata letak akan menurunkan secara bertahap sebelum pengurangan lebar. Mungkin itu tidak anggun cukup untuk semua perangkat mobile (saya hanya memiliki iPod tua untuk menguji itu). Ini memang terlihat baik pada desktop (merasa bebas untuk mengubah ukuran browser Anda untuk melihat cara kerjanya) pada tahap ini.
/ * UNTUK IPAD (lanscape MODE) DAN SCREEN KURANG DARI 1024px * // * PINDAH KE SIDEBAR BOTTOM * /
@ Media screen saja dan (min-width: 768px) dan (max-width: 1023px), hanya layar dan (min-perangkat-width: 768px): {dan (1024px max-perangkat-lebar)
# Page-wrapper
{Width: 800px;}
# Side-wrapper
{Position: relative; float: left; top: 0px; margin-top: 20px; width: auto;}
...
...
}
/ * UNTUK SCREEN KURANG DARI 768px * // * UNTUK MENJAGA FLOW KETIKA MENGURANGI LEBAR BROWSER * // * Menyembunyikan SIDEBAR, BAR SEARCH, ADS, KANCING BERBAGI, POST INFO ETC * /
@ Media screen saja dan (min-width: 500px) dan (max-width: 767px) {
# Page-wrapper
{Width: 640px;}
Menu,. # Logo img
{Width: 100%;}
...
...
}
/ * UNTUK IPHONE (lanscape MODE) DAN SCREEN KURANG DARI 500px * /
@ Media screen saja dan (max-width: 499px), hanya layar dan (min-perangkat-width: 320px) dan (max-perangkat-width: 480px) {
html
{-Webkit-text-size-adjust: none;}
# Page-wrapper
{Width: 450px;}
...
...
}
Sekian terimakasih.
Untungnya, Blogger telah melangkah maju awal dengan memperkenalkan template mobile. Ini fitur dandy berguna dalam platform ini yang membuat blog kita cukup ramah dengan perangkat kecil dan konsol portabel. Selain itu, peningkatan diperbolehkan melalui CSS (Lihat di sini). Jadi, kenapa tidak saya mengaktifkan fitur ini?. Aku begitu bodoh ketika menggunakan CSS query media yang bukan. Mobile di Blogger?
Secara pribadi itu menyenangkan, pada kenyataannya, banyak untuk bekerja dengan untuk benar-benar menanggapi browser yang berbeda dan layar. Tata letak cair juga, membangun lebih tangguh daripada layout tetap. Itulah alasan template fluida masih kurang pada jumlah dibagi secara online.
Untuk membuat desain responsif, pertama, saya sudah mulai dengan template cairan yang digunakan persentase dan EMS daripada piksel. Nicely done tapi tidak sempurna bekerja di Opera karena blog saya menggunakan berbagai warna untuk latar belakang nya (misalnya menu utama). Semua persentase dibulatkan di Opera, jadi jelas selalu ada celah kosong. Saya akan menyimpulkan di sini yang menggunakan hanya satu warna latar belakang di seluruh tema Anda untuk template fluida.
Orang Satu hal lagi, saya telah melihat membuat kesalahan ketika mereka menempatkan banyak hal selain teks (widget, iklan, dll) pada sidebar. Ini semacam elemen telah didefinisikan lebar. Jadi, ketika sidebar fleksibel itu sendiri telah diubah ukurannya untuk mengikuti lebar browser, elemen-elemen hanya mengabaikan aturan.
Jadi, saya memutuskan untuk tinggal dengan lebar tetap sementara melaksanakan permintaan media untuk blog ini. Tapi dibandingkan dengan penggunaan persentase, saya sudah untuk menghitung ulang semua lebar terkait untuk setiap parameter sesuai dengan layar target.
Selanjutnya, untuk membantu bekerja dengan browser lintas, saya menaruh link ke CSS3-mediaqueries-JS yang dilaporkan membantu dalam memberikan pertanyaan media bahkan pada beberapa browser warisan (termasuk IE 5). Sertakan dalam header;
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </ script>
Masih di header, saya sudah memasukkan meta tag yang lain untuk menghentikan mengubah ukuran gambar iPhone simulator. Meskipun itu adalah utilitas yang besar untuk menyesuaikan gambar kita di layar kecil, semua teks akan diperkecil dengan itu.
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
Dan terakhir, pekerjaan menyenangkan dimulai dengan menambahkan stylings ekstra di bawah bagian CSS. Di sini, tata letak akan menurunkan secara bertahap sebelum pengurangan lebar. Mungkin itu tidak anggun cukup untuk semua perangkat mobile (saya hanya memiliki iPod tua untuk menguji itu). Ini memang terlihat baik pada desktop (merasa bebas untuk mengubah ukuran browser Anda untuk melihat cara kerjanya) pada tahap ini.
/ * UNTUK IPAD (lanscape MODE) DAN SCREEN KURANG DARI 1024px * // * PINDAH KE SIDEBAR BOTTOM * /
@ Media screen saja dan (min-width: 768px) dan (max-width: 1023px), hanya layar dan (min-perangkat-width: 768px): {dan (1024px max-perangkat-lebar)
# Page-wrapper
{Width: 800px;}
# Side-wrapper
{Position: relative; float: left; top: 0px; margin-top: 20px; width: auto;}
...
...
}
/ * UNTUK SCREEN KURANG DARI 768px * // * UNTUK MENJAGA FLOW KETIKA MENGURANGI LEBAR BROWSER * // * Menyembunyikan SIDEBAR, BAR SEARCH, ADS, KANCING BERBAGI, POST INFO ETC * /
@ Media screen saja dan (min-width: 500px) dan (max-width: 767px) {
# Page-wrapper
{Width: 640px;}
Menu,. # Logo img
{Width: 100%;}
...
...
}
/ * UNTUK IPHONE (lanscape MODE) DAN SCREEN KURANG DARI 500px * /
@ Media screen saja dan (max-width: 499px), hanya layar dan (min-perangkat-width: 320px) dan (max-perangkat-width: 480px) {
html
{-Webkit-text-size-adjust: none;}
# Page-wrapper
{Width: 450px;}
...
...
}
Sekian terimakasih.
1 komentar:
mantapp gan !
Posting Komentar