I have three doubts = >
If I want a completely responsive page, is it better to do the media queries on the different devices or to reduce the screen and see where I should make my media queries?
The hero of my page if I want fixed on all devices is not going, only on the pc, tablets and phones is greatly increased and I do not know why.
The hero if I want it on other devices should I have several versions of the image or just one? Because only one if I give 100vh works for me at all ALWAYS AND WHEN I do not use fixed on the other devices. Come on, I try to use fixed on all devices and I see it impossible, I do not know how to do it.
I know there are 3 questions, not one, I am free to answer only one if you want. thousand thanks =)
#hero{
height: 100vh;
background: rgba(0,0,0,.1) url("http://via.placeholder.com/1440x800") no-repeat fixed center center / cover;
}
@media only screen and (max-width: 700px) {
#hero{
background: rgba(0,0,0,.1) url("http://via.placeholder.com/700x400") no-repeat center / cover;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pagina</title>
</head>
<body>
<header id="hero">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Central de ingredientes</h1>
</div>
</div>
</div>
</header>
</body>
</html>