+ 6

Size screen for the website page

How to create website page in html and css for " siza response automatically " if user open the website page on mobile be size the website page appropriate for screen ?!

12th Jan 2017, 5:42 PM
Omran Sulaiman
Omran Sulaiman - avatar
15 Réponses
+ 6
The magic word for responsive design is: "MEDIA QUERIES"...
12th Jan 2017, 5:46 PM
visph
visph - avatar
+ 5
To play with percentage in heights, you need to force the default behaviour of a html page to change... Default behaviour is to adapt the container block height to the content as minimum size. So, <body> element has this behaviour, and inherit it from <html> element. So, the default height for the two first meta container is... zero. And logically, any element asking for n% of height, is calculate from zero base ^^ Well to modify the root behaviour, we only need to set html and body height to 100%: html, body { height:100%; } It works, because parent of <html> is document, which isn't an html element, so his dimensions are inherited from window object, technically the viewport ( display zone )...
12th Jan 2017, 10:46 PM
visph
visph - avatar
+ 4
just put this in your - <head> <meta name="viewport"content="width=device-width, initial-scale=1"> & see the mazic ✔
13th Jan 2017, 6:29 PM
vinod pareek
vinod pareek - avatar
+ 3
you can use % in your css. example width:100% here is a good read for more info. hope it helps
12th Jan 2017, 7:59 PM
Metrik 🕵
Metrik 🕵 - avatar
12th Jan 2017, 11:08 PM
Metrik 🕵
Metrik 🕵 - avatar
+ 2
just write <meta name="viewport" content="width=device-width"> within <head></head> we can keep in touch if you want on FB and my name there , the same here Good Luck
12th Jan 2017, 9:30 PM
Abdelrhman Sayed EL-Sadory
Abdelrhman Sayed EL-Sadory - avatar
+ 2
you should use bootstrap because bootstrap is designed to fight with this (Responsiveness) problem, it is very difficult to design responsive website without bootstrap. bootstrap is open source and free to use and very easy to use. Media queries make bootstrap more powerful. like us to know more https://fb.com/eightrockindia
15th Jan 2017, 2:11 PM
Sunil Kumar
Sunil Kumar - avatar
+ 2
Try to use Bootstrap its easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. try to use different tools in your projects...
15th Jan 2017, 5:34 PM
Şamil Sefergil
Şamil Sefergil - avatar
+ 1
For the width to succeed but the height does not work if you use the width for the percentage
12th Jan 2017, 10:21 PM
Omran Sulaiman
Omran Sulaiman - avatar
+ 1
need to set with height & width in %
13th Jan 2017, 11:56 AM
Kamran Shahzad
Kamran Shahzad - avatar
+ 1
i will advice...irst just check that the user is using a desktop or a phone and redirect them to the pages..like 2diffrentpages for 2diffrent devices
13th Jan 2017, 5:19 PM
ARNAB BISWAS
ARNAB BISWAS - avatar
0
you use width 100% on every parent div & tag ..
16th Jan 2017, 10:01 AM
Muneeb ur Rehman
Muneeb ur Rehman - avatar
0
Put this between the head tags: <meta name="viewport" content="width=device-width, initial-scale=1.0">
16th Jan 2017, 10:19 AM
Eddy Lucas
Eddy Lucas - avatar
0
use media queries.. and use width 100% on every parent div & tag..
16th Jan 2017, 10:23 AM
Muneeb ur Rehman
Muneeb ur Rehman - avatar
- 1
html is my project
16th Jan 2017, 9:10 AM
Franco
Franco - avatar