How to change the appearance of the site according to the device used, without having to script on the client or server?

Question

Someone here knows how to create a responsive site from scratch?

Without using a framework like Bootstrap?

I need it because I get it layouts in all custom PSD and it would be easier to create from scratch, since in a period not too distant than all sites will have to be compatible with mobile phones.

Answer 1

Study Media Queries, with it you define the sizes in which there will be modification in the layout, for example:

When you reach the minimum width size of 767px change the background color for another.

Here are some examples:

/* Smartphones (retrato e paisagem) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (paisagem) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (retrato) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (retrato e paisagem) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (paisagem) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (retrato) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops e laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Resoluções grandes ----------- */
@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 */
}

source: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

I don’t think I can explain exactly what you’re looking for with a simple answer, but I recommend giving a read in this article, that will enlighten you some techniques for your layout to be responsive.

The matter touches on matters you will need as:

• Media Query
• Frequent resolutions
• Min Max width

Answer 3

A start would be:

1. Use properties max-height, 'max-width', overflow: hidden, etc..

2. Use media query in the same css used for larger devices:

   @media screen and (max-width: 1024px){
       img.bg {
           left: 50%;
           margin-left: -512px;
       }
   }
   

3. Use own css files for lower resolution devices:

   <link rel="stylesheet" href="smartphones.css" media="screen and (max-width:480px)">
   

Among others.

Answer 4

There is the possibility of creating a responsive website without using a framework, but using them will make your life easier and consequently save time by having several things "ready". I do not recommend using if you are a beginner, I believe that eliminates a phase of learning.

I developed projects with several frameworks among them, Bootstrap, Foundation, Semantic Ui and currently do not use because the code is not always well organized, I do not use so many classes and the semantics used is horrible.

A cool tip is to read some Mobile First, Media Queries, Relative Measures. Do not use gambiarras in the project, the organization in the initial stage will help you a lot in the course of the same.