Saya telah melakukan beberapa penelitian tentang pertanyaan media dan saya masih tidak mengerti bagaimana menset tampilan dengan device tertentu, tampilan desktop, tablet dan mobile.
Contoh:
@media (min-width:1101px) { //wide screen
//css
}
@media (min-width:768px) and (max-width: 1100px) { //desktop
//css}
@media (min-width:468px) and (max-width: 767px) { //tabs
//css}
@media (max-width: 467px) {
//css}
IMO these are the best breakpoints:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon