Bu adımımızda responsive tasarımımızı tamamlayacağız ve projemizi bitireceğiz.
Size kolaylık olması açısından tasarımlarınızda kullanabileceğiniz media screen kodlarını aşağıda veriyorum.
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-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-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-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 */
}
Kaynak: www.hongkiat.com/blog/css-snippets-for-designers/
Belki daha önceden yaptığınız bir site olabilir ve bu siteyi responsive yapacağınızı düşünmeden tasarlamış olabilirsiniz. Bu gibi durumlarda ilk önce tasarladığınız siteye responsive'in gerekli olup olmadığını sorgulayın. Eğer gerekliyse mümkün olduğunca en basit CSS (media-screen) kodlarını kullanmalısınız.
Bu adımda biten çalışmayı aşağıdaki bağlantı ile indirebilirsiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Beşinci adımı tamamladınız. Bir sonraki adımda sitemizi webde yayınlayacağız.