Make any web page responsive using css
1.Put the code in <head> </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">
-------------------------------------------------------------------
2.Put it inside <style> </style>
------------------------------------------------------------------
/* Tablet Landscape */
screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
---------------------------------------------------
Put it inside style tag
---------------------------------------------------------
min-device-width:600px) { (
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
min-device-width:800px) { (
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
-------------------------------------
if you have to play video in container from youtube or others
-----------------------------------------
<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>
<!-- Inside style tag -->
--------------------------
.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%;
}
-------------------------------------------------
HTML typography
----------------------------------------------------
inside style tag...................
html { font-size:100%; }
min-width: 640px) { body {font-size:1rem;} } (
min-width:960px) { body {font-size:1.2rem;} } (
min-width:1100px) { body {font-size:1.5rem;} } (
Now hopefully your website is responsive
#make your website / webpage responsive using css
#design a responsive website using css
#make any web page responsive
#responsive design using css
Comments
Post a Comment