CSS for responsive website

[juansann]

Hello,
I am designing a new web page. I have always used one css file for the computer version and another one for the mobile version. The fact is that this time I want to create a web 100% responsive, so that it is able to adapt to different screens without having to change files.
For this I have implemented layers with minimum size and maximum size 100% of the screen, but in some layers I need to have a fixed size depending on the size of the screen. Do you know if there is a directive with which you can put a fixed size in front of the size of the screen?

Thank you in advance.

[mlegg]

have you tried using Bootstrap? https://getbootstrap.com/

[coothead]

have you tried using Bootstrap?

Let's hope not.

Why Bootstrap Is Bad

1. Bootstrap encourages the use of classes in a presentational manner,
   which defeats the reason for keeping HTML and CSS separate.
   
   
2. Bootstrap encourages the use of endless pointless redundant classes
   with pointless divs, resulting in two to three times the HTML as one
   would have without it, only further compounded by one having to write
   as much CSS as one would have without the framework. If it saves one
   anything in CSS, it only does so by making one write sufficiently more
   HTML that it's awash. It's a step sideways on work and a step backwards
   on methodology.
   
   
3. Since it's use results in presentational classes and excessive div and
   span elements, it is basically putting presentation in the markup where it
   has absolutely no business. HTML and CSS are separate so one can
   have multiple appearances, slapping a class in for each of those
   possibilities is really nonsensical.
   
   
4. The way Bootstrap works is as flawed as the new, allegedly structural,
   tags from HTML 5. It undoes nearly twenty years of progress to the point
   where one might as well go back to writing HTML 3.2 and pretending that
   CSS never even existed. It can only make one's work harder.
   
   
5. The HTML should say what things are, not how one wants them to look
   like. By using classes to say what things are going to look like, one
   violates that most basic rule of what HTML is actually for. That's why
   OOCSS and the the frameworks based on that notion are utter rubbish.
   
   
6. If it looks simpler, one falls into the trap of false simplicity. It is as much if
   not more work, resulting in one writing as much if not more code, not
   counting the massive size of the framework against it. The only way it
   could 'be simpler' or 'easier' or 'faster' is if one doesn't know enough
   about HTML or CSS to to make a rational choice about using a framework.

coothead

[davidlee21]

The GOOD
Bootstrap was very good to us over the years. We became more efficient and put our projects out faster. The framework also thought us how to be better developers. I know a lot of people out there say that there are bad practices in the core of Bootstrap – the naming is not always semantic, and you can end up with a DOM crammed full of classes. But it does handle modularity very well and I personally grew as a frontend developer through it. By analyzing the internals of Bootstrap I picked up the good stuff it does and started to apply it to my own code. Because of this, with time I have learned to write extremely re-usable CSS code that is easy to maintain.


The BAD
What bugged me with Bootstrap is it’s heaviness and how I started using less of it’s features over the years. When I was starting out as a web developer like many others I didn’t regard performance. I thought – well its the year 20-something, Internet connections are pretty fast, what difference does 100kb here or there make? Oh how wrong was I! Over the years I learned every kilobyte counts and today I’m obsessed with making everything as lean as possible.

[juansann]

I haven't tried Bootstrap... I am going to valorate it, because I do not know how difficult it is to integrate it into a project. Is possible integrate Bootstrap in any CMS?

[wkennyspain]

It's a pity your reply did not offer the OP a better alternative

[coothead]

It's a pity your reply did not offer the OP a better alternative

Responsive web pages should be coded using em and % instead of px units.

CSS modifications for various screen widths are simply handled with @media queries.

This is not rocket science, it is a basic coding skill for a webpage developer.

Here is an example...

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color:#f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
#gallery {
    padding: 0.625em;
    margin: 0;
    border: 0.06em solid #999;
    border-radius: 1em; 
    background-color: #fed;
    overflow: hidden;
    list-style-type: none;
 }
#gallery li {
    float: left;
    width: 24%; /* 4 columns ~ 100%/4 - 1% margin value */
    margin: 0.5%;
    padding: 0.625em;
    border: 0.06em solid #999;
    border-radius: 0.75em;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0.375em 0.375em 0.375em #999;
    overflow: hidden;
 }
#gallery img {
    display: block; 
    width: 100%;
    height: auto;
    border: 0.06em solid #000;
    border-radius: 0.625em;
    box-sizing: border-box;
 }
#gallery span {
    display: block;
    margin-top: 0.625em;
    border: 0.0625em solid #000;
    border-radius: 0.625em;
    background-color: #ccc;
    line-height: 2;
    text-align: center;
 }
@media screen and (max-width: 63.75em) {
#gallery li {
    width: 32.333%; /* 3 columns ~ 100%/3 - 1% margin value */
  }
 }
@media screen and (max-width: 42.5em) {
#gallery li {
    width: 49%; /* 2 columns ~ 100%/2 - 1% margin value */
  }
 }
@media screen and (max-width: 21.25em) {
#gallery li {
    width: 99%; /* 1 columns ~ 100%/1 - 1% margin value */
  }
 }
</style>

</head>
<body>

<ul id="gallery">
 <li><img src="http://lorempixel.com/g/300/486/people/7" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="http://lorempixel.com/g/300/486/people/6" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="http://lorempixel.com/g/300/486/people/5" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="http://lorempixel.com/g/300/486/people/9" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
 <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
</ul>

</body>
</html>

coothead

[vikasvirdi]

Bootstrap isn't bad, I think it is great and I always use it to make websites responsive and It works well!

[juansann]

Thank you for the example coothead, is going to help me very much... I have been studied about it and is not difficult, but is necessary experience to not spend lot time to do it
Thank you again

[DriverDan12]

for css you have to learn how to use grids, easy way is to use bootstrap, but speed website will be little bit lower when you use Bootstrap. You can contact me if you need any help with css.