Cara buat responsive web design untuk semua ukuran device di css

Assalamu'alaikum wr wb.
Kali ini saya akan share bagaimana Cara buat responsive web design untuk semua ukuran device di css.
Berikut ini syntaxnya.
________________________________________________

/* 1.Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{

}

/* 2.Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px)
{

}

/* 3.Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{

}

/* 4.iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{

}

/* 5.iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

/* 6.iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{

}
/* 7. iPad 3 landscape **********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2)
{

}
/* 8. iPad 3 potrait **********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2)
{

}
/* 9.Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px)
{

}

/* 10.Large screens ----------- */
@media only screen  and (min-width : 1824px)
{

}

/* 11.iPhone 4 landscape----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2)
{

}

/* 12.iPhone 4 potrait----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2)
{

}

/* 13.iPhone 5 landscape----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2)
{

}

/* 14.iPhone 5 landscape----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2)
{

}

/* 15.iPhone 6 landscape----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2)
{

}

/* 15.iPhone 6 potrait----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2)
{

}

/* 16.iPhone 6+ landscape----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2)
{

}

/* 17.iPhone 6+ potrait----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2)
{

}

/* 18.Samsung Galaxy S3 landscape----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2)
{

}

/* 19.Samsung Galaxy S3 potrait----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2)
{

}

/* 20.Samsung Galaxy S4 landscape----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3)
{

}

/* 21.Samsung Galaxy S4 potrait----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3)
{

}

/* 22.Samsung Galaxy S5 landscape ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3)
{

}

/* 23.Samsung Galaxy S5 potrait ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3)
{

}
________________________________________________
Semoga bermanfaat.
http://pangeran-it.blogspot.com/