Page 1 of 1
Responsive website
Posted: Mon Nov 18, 2013 5:38 pm
by sjoerdd87
Hallo allemaal,
Hoe kun je je website het beste responsive maken? ben zelf al bezig geweest door verschillende stylesheets te maken en hieraan een MediaQuery te hangen:
Code: Select all
only screen and (max-width: 9999px) and (min-width: 481px)
Code: Select all
only screen and (max-width: 480px) and (min-width: 321px)
Code: Select all
only screen and (max-width: 320px) and (min-width: 5px)
Maar nu kan ik als ik op mijn website kijk niet naar de "desktop" versie gaan, hoe kan ik dit wel doen?
Of is er misschien een ander idee om je website responsive te maken?
Re: Responsive website
Posted: Mon Nov 18, 2013 6:40 pm
by andre_designer
heb je hier wat aan??? vond dit een tijdje geleden op het internet(weet niet precies waar, Dacht op css-tricks.com)
Code: Select all
/* 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 */
}
Re: Responsive website
Posted: Tue Dec 17, 2013 12:46 pm
by pasmaskas