Make any web page responsive using css

- 

1.DEsign a responsive layout......................



---------------------------------------------------------------------------



Fixed  the default size. For example, set the default width is 1100px. When we pleased with the non-responsive version, we will add media queries and slight changes to the code to make the code responsive. It’s way easier to focus on one task at a time.








Then paste the following lines inside <head> and </head> tag.









<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">














<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">














<meta name="HandheldFriendly" content="true">














A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. 


By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.


In other words, media queries allows the website to look good on all kinds of displays, from smartphones to big screens.







Media queries depends of your website layout, so it’s kinda difficult for me to provide you a ready to use code snippet. However, the code below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.



By having a look at the code, you can see that there are two sizes: The first have a maximum width of 1060px and is optimized for tablet landscape display. #primaryoccupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.



The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, it is decided to give #primary a 100% width. #secondaryalso have a 100% width, and will be displayed below #primary.



As already said, you’ll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file.


























/* Tablet Landscape */














@media screen and (max-width: 1060px) {














    #primary { width:67%; }














    #secondary { width:30%; margin-left:3%;}  














}




























/* Tabled Portrait */














@media screen and (max-width: 768px) {














    #primary { width:100%; }














    #secondary { width:100%; margin:0; border:none; }














}

































2 – Medias



A responsive layout is the first step to a fully responsive website. Now, let’s focus on a very important aspect of a modern website: medias, such as videos or images.



The CSS code below will ensure that your images will never be bigger than their parent container. It’s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.


























img { max-width: 100%; }



























Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.



Here is a technique developed by Nicolas Gallagher. Let’s start with the html:


























<img src="image.jpg"














     data-src-600px="image-600px.jpg"














     data-src-800px="image-800px.jpg"














     alt="">































As you can see, we used the data-* attribute to store replacement images urls. Now, let’s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:


























@media (min-device-width:600px) {














    img[data-src-600px] {














        content: attr(data-src-600px, url);














    }














}




























@media (min-device-width:800px) {














    img[data-src-800px] {














        content: attr(data-src-800px, url);














    }














}































Impressive, isn’t it? Now let’s have a look to another very important media in today’s websites, videos.



As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La. This technique allows you to make embedded videos responsive.



The html:


























<div class="video-container">














<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>














</div>































And now, the CSS:


























.video-container {














position: relative;














padding-bottom: 56.25%;














padding-top: 30px;














height: 0;














overflow: hidden;














}




























.video-container iframe,  














.video-container object,  














.video-container embed {














position: absolute;














top: 0;














left: 0;














width: 100%;














height: 100%;














}



























Once you applied this code to your website, embedded videos are now responsive.



3 – Typography



The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.



Until now, most developers (including myself!) used pixels to define font sizes. While pixels are ok when your website has a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.



The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.



As rems are relative to the html element, don’t forget to reset html font size:


























html { font-size:100%; }



























Once done, you can define responsive font sizes as shown below:


























@media (min-width: 640px) { body {font-size:1rem;} } 














@media (min-width:960px) { body {font-size:1.2rem;} } 














@media (min-width:1100px) { body {font-size:1.5rem;} }































Reference :--



Collected from different websites



#How to make your web page responsive



#Make your existing website responsive



#basics of making the web site responsive using css



#makeYourPageResponsive

Comments

Post a Comment

Popular posts from this blog

Java Interview Preparation (conceptual)

-
Image
 All Concepts sumerized .... ------------------------------------------------------------- *** Java is partially Object-oriented as it has primitive types. (Primitive i.e. int, float are not the objects, to convert them to use as Object, we use wrapper class) ***Java is platform-independent but JVM dependent. And JVM is platform dependent because for Linux there is a different JVM whereas for windows it's different. _-_____-----___--___--____--- Oo ps Conc ept  _-_____-----___--___--____--- abstraction ,  encapsulation ,  inheritance ,  polymorphism .  Inheritance : Real-World Example : Children have some of the qualities of their parents and grandparents or their ancestors. Java Example: There is a method in the parent class and you want the same method to create in a child class. Why create a new one if it already exists. As a child, you can inherit the method. There are a few variables in a class and you need them .So why to create new variables. We can ...
Read more

Git Commands With Output Log

-
Step by step command only Guide where command starts with symbol $ ----------------------------- git config -- global user . name "your username"   git config -- global user . password "your password" Track file : This means the file is added to the git repository in your local machine. Also called added to the stage area. Untracked File : Code is still in your local folder not added to git repository ----------------------------------------------- Commands --------------------------- checking current working directory  rssan@DESKTOP-QA9A7TD MINGW64 ~ $ pwd /c/Users/rssan creating a new directory rssan@DESKTOP-QA9A7TD MINGW64 ~ $ mkdir test getting inside that newly created directory rssan@DESKTOP-QA9A7TD MINGW64 ~ $ cd test creating a new directory inside for git repository rssan@DESKTOP-QA9A7TD MINGW64 ~/test $ mkdir repo getting inside the newly created repo directory rssan@DESKTOP-QA9A7TD MINGW64 ~/test $ cd repo/ Again created a mygitrepo directory inside rss...
Read more

Java 8 Function Interface

-
Java.Util.Function ------------------------ Java.Util.Function added in java 8. So let's have a closer look into it. To go through the documentation click the below link. https://docs.oracle.com/javase/8/docs/api/java/util/function/package-summary.html The 4 important topics are , 1. Predicate 2. Consumer   3. Function 4. Supplier A youtube example for better understanding is :  https://www.youtube.com/watch?v=Tapz6_T5oHY Consumer :  --  two methods, accept(T t) and andThen() ** accept(T t) , returns void means no thing returned. It accepts only input. **andThen executes two consumers one after another. #java #java8 #java 8 #java.util.function #javaFunction #java function #java consumer #java predicate #java supplier #java lambda expression
Read more