0
How do I format an HTML page so that it automatically adjusts its width to fit the width of the device it is loaded on?
5 Réponses
+ 6
body, html {
width:100%;
height:100vh;
}
+ 3
Try to format almost sizes definition in relative units instead of absolute ( fixed size ) units:
% are percentage, relative to the element container/parent
em is for espacement of letter 'm', is relative to the font-size applied on the element
ex like em for 'x' size
vw is percentage relative to the viewport width ( visibled zone of your page ), allow to avoid refering % of parent/container
vh like vw for the viexport height
And add the <meta> viewport tag in the <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
+ 2
Corrected ;)
( initial-size :P )
+ 1
I would also remove the margin from the body, and if you still want the 10px put it as padding and add box -sizing
body {
width: 100%;
height: auto,
margin: 0;
padding: 10px;
box-sizing: border-box;
}
p.s There is a typo with the above meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
0
Wow! thanks guys.. I'd apply these ryt away
Vous avez souvent des questions comme celle-ci ?
Apprenez de manière plus efficace, gratuitement :
