Notifikationer

Markér alle som læst Log ud

nph12 Nybegynder

01. august 2011 - 21:39 Der er 4 kommentarer og
1 løsning

Webdesign til forskellige skærmopløsninger og platforme

Hej
Hvordan laver jeg et webdesign som passer til forskellige skærmopløsninger og platforme?

Synes godt om

Jim Rasmussen Novice

01. august 2011 - 21:55 #1

Hej. Der er MANGE måder at gøre det på.

en er altid at centrere dit indhold ved brug af en "Wrapper" En div der indeholder alt dit indhold. og så placer denne i midten ved brug af css.

Således.

.Wrapper
{
position:relative;
top:0px;
left:0px;
margin-left:auto;
margin-right:auto;
}

En anden måde er at bruge % når du definere bredden på dine layout elementer på dine hjemmesider. Så vil den jo justere sig selv efter skærm størrelsen "Opløsningen"

Ved brug af wrapper metoden er det god ide at holde sig under 980 i bredde på dit layout. Da der stadig sidder brugere på en opløsning af 1024 x 768 px.

Ellers brug --> http://www.w3schools.com/. Her kan du finde mange brugbare oplysninger. (;

Synes godt om

mediman Nybegynder

01. august 2011 - 22:23 #2

Du kan også generere den relevante css serverside alt efter opløsning.

Synes godt om

nph12 Nybegynder

02. august 2011 - 14:02 #3

mediman>> kan du uddybe lidt? Eller komme med et lille eksempel?

Synes godt om

mediman Nybegynder

02. august 2011 - 15:03 #4

Jeg fandt lige et godt eksempel, den vælger den relevante css fil clientside, det er ret elegant :

index.php
<html>
<head>
<link id="stylesheetLink" rel="stylesheet" href="#" />
<script language="JavaScript">
var smallStylesheetLink = "small.css";
var normalStylesheetLink = "normal.css";

function setStyle() {
var width, height;
if(window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
}
else if(document.documentElement.clientWidth) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if(document.body.clientWidth) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
var stylesheetLink = document.getElementById("stylesheetLink");
var useSmall = (width <= 800 && height <= 600);
stylesheetLink.setAttribute("href", (useSmall ? smallStylesheetLink : normalStylesheetLink));
}

setStyle();
</script>
</head>
<body>
<h1>Testing</h1>
</body>
</html>

small.css
body { background-color: red; }

big.css
body { background-color: blue; }

Læg filerne i en mappe på serveren, åbn index.htm i en browser og prøv at opdatere vinduet > hhv. < 800*600

Eksemplet kan udbygges efter behov.

Synes godt om

nph12 Nybegynder

03. august 2011 - 08:14 #5

Mange tak.

Hvordan griber de store sites denne problemstilling an?

Det jeg nok egentlig spørger ind til er, hvordan jeg bruger CSS til at style min(e) hjemmesider, så de passer til forskellige skærmopløsninger og platforme.

Jeg har indtil videre kun brugt absolute størrelser på de hjemmesider jeg har leget med (det har kun været til en skærmstørrelse).

Hvordan bruger jeg relative og absolute størrelser? Hvad bruger I til at style jeres hjemmesider?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS