Você precisa que seu site seja visualizado corretamente em telas de tamanhos e resoluções diferentes?
Basta colocar o código CSS antes de </ head >
<style>
html, body{
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
@media only screen
and (min-width : 321px) {
}
@media only screen
and (max-width : 320px) {
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
@media only screen
and (min-width : 1224px) {
}
@media only screen
and (min-width : 1824px) {
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
</style>
Importante:
Se você não construiu seu site observando percentuais ao invés de pixels, terá problemas com scroll horizontal ou cortes de leitura. Portanto sempre que possível use 100 ou 99 %.
Objetivo do Web Scriptum
Criei este blog como repositório de scripts e códigos que criei ao longo de anos de trabalho e que continuo criando. Muitos me ajudaram, esta é minha hora de ajudar.
