Well, I always try to do some website, in html and css (since I'm not very good at design), the site is perfect for me, all right etc ...
But when I look at another computer, that is with different resolution, it is completely destroyed.
What would be the best way to make a website responsive in design, since I already use the% and still it's all gone.
Could you give me some examples of html and css techniques?
Thank you.
One tip to start making responsive and standardized designs is to use the Materialize framework.
They have a very basic initial template and great documentation for learning. Get here
The Tableless website also has a great responsive design tutorial. Visit here
Good luck!
Developing a responsive interface is not such a simple task because in a responsive layout it will always be necessary besides using elements of relative size, hiding elements, decreasing or increasing font sizes, images, and so on. For this you will also need to know CSS3 @media Rule.
Here are some examples:
div{
width:80%;
margin:0 auto;
}
h1{
color:blue;
}
@media screen and (min-width: 720px) {
h1 {
color: red;
font-size:56px;
}
}
@media screen and (max-width: 480px) {
ul {
display:none;
}
button{
display:none;
}
}<div>
<h1>REDIMENSIONE O TAMANHO DA TELA</h1>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<button>AÇÃO</button>
</div>To create your own responsive layout you will have a lot of work to adapt it to all possible dimensions of screens, however to facilitate this development there are frameworks such as: Bootstrap , Zurb Foundation , Materialize , Google Material Design and others that already have specific classes and elements.