Site op verschillende schermresoluties
Ik zit al een tijdje met een probleempje.
Op mijn laptop met resolutie 1024 x 768 heb ik een website gemaakt.
Alles staat zoals ik het wil, overal gebruikte ik percentages voor posities en afmetingen en op vele plaatsen DIV's.
Maar wanneer ik de site open op bredere schermen met hogere schermresoluties, dan verspringen vele elementen. Jammer genoeg ziet het er dan allemaal niet meer mooi uit.
Mijn vraag: hoe zorg ik ervoor dat mijn site op grotere schermen opent en er dan uitziet zoals nu op mijn eigen scherm?
Bestaat er een manier zodat alles gewoon proportioneel aangepast wordt aan de schermgrootte?
Of moet je per resolutie aanpassingen maken?
Ik ben al een hele tijd op zoek naar een antwoord op dit probleem.
Hopelijk kunnen jullie me alsnog helpen en me enkele tips meegeven.
Alvast bedankt!
Jasper
Met Media Queries kun je stijlen meegeven voor bepaalde afmetingen van een scherm of specifieke breedtes. Op deze manier kun je heel makkelijk je browser window steeds kleiner maken en wanneer iets in je design verschuift wat niet goed is kijk je hoeveel pixels breed je browser window is en voeg je daar een speciale stijl voor. Zo ga je door.
Ik zocht dus naar iets dat er niet was, goed te weten dat ik anders te werk moet gaan. Hartelijk dank hiervoor!
Dus, dezelfde manier gebruiken om te kijken hoe het eruitziet op grotere schermen? En dan aanpassen?
Dan denk ik dat ik beter ook op een groter scherm werk met een hogere resolutie en zo naar beneden werk.
Nogmaals, dank je wel voor deze gouden tip, het is me nu heel wat duidelijker.
Gr Jasper
Ik heb een vergelijkbaar probleem, gebruik een tv als monitor in een resolutie van 1360X768 waarbij het gemaakte project er goed uit ziet, bekijk ik hetzelfde project op een 10 inch tablet dan zijn elementen verschoven en dus niet meer goed op z'n plek,
Dit keer bekeek ik het vanaf dezelfde website,
Grtx,
Btw:dit is gemaakt onder bootstrap,
Gewijzigd op 26/10/2014 17:11:14 door Rinus o
Bootstrap gebruikt Mediaqueries voor hun container/divs waarbij alles is ingedeeld in procenten.
Het ligt er dus maar aan hoe groot het scherm is.
Er bestaat een mooie afbeelding die een beetje de spot drijft met Android.
http://m.c.lnkd.licdn.com/mpr/mpr/p/5/005/064/004/3841fcb.jpg
De fonts e.d spelen een rol en ook afbeeldingen in je website spelen een rol.
Elke pixels die je afwijkt van de opgegeven afmetingen heeft bij Bootstrap best een impact omdat het mobile first is.
Oftewel procenten gebaseerd.
Het is makkelijker om 3 maten aan te houden, wat Bootstrap 2 ook altijd deed.
- Mobile
- Tablet
- Desktop
Hierin zou je dan de afmetingen kunnen opgeven waarin je apparaat horizontaal is of verticaal.
Ik doe hetzelde maar dan met LESS.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*
Document : mobile
Author : Rickert Bombaklats
Description:
Styles for mobile (responsive)
*/
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
/* Small devices (mobile-devices, 480px and down) */
@media (max-width: @screen-xs-min)
{
}
/* PORTRAIT */
@media (max-width: @screen-xs-min) and (orientation : portrait)
{
}
/* LANDSCAPE */
@media (max-width: @screen-xs-min) and (orientation : landscape)
{
}
Document : mobile
Author : Rickert Bombaklats
Description:
Styles for mobile (responsive)
*/
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
/* Small devices (mobile-devices, 480px and down) */
@media (max-width: @screen-xs-min)
{
}
/* PORTRAIT */
@media (max-width: @screen-xs-min) and (orientation : portrait)
{
}
/* LANDSCAPE */
@media (max-width: @screen-xs-min) and (orientation : landscape)
{
}
Dan over het probleem van Jasper.
Ik vindt het toch gek dat je elementen verschuiven. Heb je een vaste container die alles netjes bij elkaar houdt of heb je je website "fluid" dus volledig van links naar rechts?
Ik heb ondertussen geleerd dat er voor verschillende schermresoluties, verschillend @media-queries dienen ingesteld te worden voor bepaalde elementen wanneer die niet goed staan. Daarnaast gebruik ik ook allemaal percentages voor de afmetingen.
Hieronder post ik mijn code voor de index-pagina.
Daar zit ik voorlopig met twee probleempjes:
1. De lettergrootte past zich niet mee aan, hoewel ik met em-afmetingen werk (of doe ik het fout?).
2. De twee ENTER-links onder de afbeelding krijg ik niet op één lijn gezet.
Iemand ideetjes?
Groetjes (code hieronder)
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale-1.0">
<title>3D-architectuur_index</title>
<link href="Stylesheet_index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="divlog">
<img src="Afbeeldingen/Logo3Dindex.jpg" alt="logo_3darchitectuur" class="Img_Index">
<a href="HTML/3D-architectuur_Home.htm" class="welkomstlink1">ENTER SITE</a>
<a href="HTML/3D-architectuur_Home.htm" class="welkomstlink2">ENTER SITE</a>
<p id="copyright">
3D - architectuur<br>
ir. architect Bart Baeken
<p id="linkJPopsdesign">
(website created by <a href="https://www.linkedin.com/profile/view?trk=tab_pro&locale=en_US&id=13219065" class="linkJPops" target="_blank">Jasper Verelst)</a>
</div>
</div>
</body>
</html>
html {
font-size:16px;
}
body {
width:100%;
height:100%;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
background-color:white;
font-size:100%;
}
#wrapper {
position:absolute;
width:100%;
height:100%;
margin:0 auto;
background:white;
border:1px solid white;
font-size:100%;
}
/*
body:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
*/
#divlog {
display:block;
margin-top:15%;
margin-left:auto;
margin-right:auto;
width:50%;
height:50%;
border-width:;
border-style:;
border-radius:;
box-shadow:;
text-align:;
vertical align:;
}
.Img_Index {
width:100%;
height:auto;
}
.welkomstlink1:link {
text-decoration:none;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
font-size:1.1875em;
margin-left:20%;
}
.welkomstlink2:link {
text-decoration:none;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
font-size:1.1875em;
margin-left:68%;
}
/*
.DivWelkomstlink1 {
width:15%;
height:10%;
position:relative;
margin-left:31%;
margin-top:-5%;
}
.DivWelkomstlink2 {
position:relative;
margin-left:60%;
margin-top:-6%;
width:15%;
height:10%;
}
*/
.welkomstlink1:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.welkomstlink2:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-moz-transform: scale (1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.welkomstlink1:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
.welkomstlink2:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
.welkomstlink1:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
.welkomstlink2:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
#copyright {
text-align:center;
margin-top:20%;
margin-left:auto;
margin-right:auto;
font-size:1em;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
span:hover {
-moz-transform: scale (1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
/*
span {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
font-size:1em;
}
*/
#linkJPopsdesign {
display:block;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
margin-top:1%;
text-align:center;
}
.linkJPops:link {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}
.linkJPops:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-moz-transform: scale (1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
text-decoration:none;
}
.linkJPops:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}
.linkJPops:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}
</code>
- In links en mappen moet je proberen niet met hoofdletters en spaties te werken (tenzij het classes zijn van PHP)
- Je code in CSS is erg groot en er zitten veel onnodige elementen in (geeft niet zo leer je ervan als iemand anders er naar kijkt en je op je fouten wijst)
Hier heb je een linkje waarin in ik jou code hebt geplaatst en wat nu stukken kleiner is met "hetzelfde" resultaat.
Zo kan je namelijk je code delen met ons en kunnen wij er ook op voort borduren.
De link staat in mijn publieke JSfiddle account en kan je forken
http://jsfiddle.net/rickdgraaff/60wj02cg/
Ik zal zo een update maken waardoor alle sgoed moet komen te staan en de 2 wegvalt omdat ik dan die versie als "master" versie gebruik.