Kunnen enkele media queries op mijn site verbetering gebruiken?

[Veng]

Een kennis heeft voor mij de opzet voor een website gemaakt (http://is.gd/BNnGBf). Hij adviseerde asp.net omdat ik eigenlijk ook een eigen gastenboek wilde (al is er dat nog niet van gekomen omdat ik dat zelf niet kan programmeren en ik daarom nu de route via Facebook heb gekozen. Het blijft echter wel een wens omdat ik op andere sites zie dat dat meer response geeft).
Vullen met content en uitbreiden doe ik zelf. Als leek kan ik daar wel mee uit de voeten.
(Is het nodig dat ik de css insluit, omdat je met een browser (bv. Firefox plus Firebug) ook de css kunt bekijken):
Omdat mobiel gebruik steeds meer toeneemt, zou ik dat ook graag op orde hebben. Het is me gelukt om in de css wat formaten op te nemen. Ik gebruik hiervoor de volgende regels:
@media only screen and (max-width:900px)
@media only screen and (max-width:768px)
@media only screen and (max-width:480px)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
(Zo te zien ben ik vergeten de eerste drie regels in overeenstemming te brengen met de laatste regel)
Hoewel e.e.a. redelijk lijkt te werken, denk ik dat er verbetering mogelijk is.
Iemand adviseerde me eens jQuery Mobile. Ik heb dit nog niet geprobeerd omdat ik niet weet of ik hiermee uit de voeten kan. Programmeren is bepaald niet mijn sterkste kant en ik ben bang dat als ik mijn hele site moet omgooien dat ik vast ga lopen. Daarom ben ik al tevreden met kleine verbeteringen. Bijv. een betere syntax van mijn media regels of andere verdeling van pixels. (Ik wil zeker geen afzonderlijke websites voor PC en mobile. Dat is me te complex in het bijhouden van de content)
Al vast bedankt

 

[jorenman]

Media Queries worden veel gebruikt om websites op alle apparaten er goed uit te laten zien, het nadeel is wel dat je best veel moet programmeren.
Daarnaast zal ik de Media queries veranderen naar dit:

@media only screen and (min-width: 769px) and (max-width:900px),  only screen and (min-device-width: 769px) and (max-device-width:900px)
@media only screen and (min-width: 481px) and (max-width:768px), only screen and (min-device-width: 481px) and (max-device-width:768px)
@media , only screen and (min-width: 320px) and (max-width: 480px), only screen and (min-device-width : 320px) and (max-device-width : 480px)

Een komma betekent 'of'.

Als je geen zin hebt om te programmeren is jQuery Mobile inderdaad nog een oplossing, maar dit raad ik niet echt aan.
jQuery Mobile vind ik zelf meestal niet mooier dan zelf (goede) geprogrammeerde websites.
Ook als je gebruik maakt van zelf gestylde tabellen enzo kan je denk niet goed overweg met jQuery Mobile.

Veel succes!

Groetjes,
Jorenman

 

[Veng]

Dank je Jorenman. Precies het antwoord dat ik zoek Ik ga er de komende tijd mee aan de gang.

 

[Veng]

Ik neem aan dat die komma, vooraan in de 3e querie, door het late uur is ontstaan. Mijn software (MVS) geeft er in elk geval een foutmelding op.
(Scheelt toch ook weer een stuk in de css, want ik had 4 queries.)