Webbutveckla - Responsiv

Tror uttrycket du letar efter är "responsivt" och inte plattformsoberoende. Plattformsoberoende betyder att det skulle kunna köra på vilket system som helst. Responsivt betyder att content anpassar sig för klienten.

PHP kommer inte hjälpa dig göra sidan responsivt. Val av backend-programmeringsspråk påverkar bara hur du hämtar och manipulrerar data, inte hur du presenterar den. För att göra sidan responsiv vill du använda dig av något befintligt framework, exempelvis http://getbootstrap.com/

Finns mängder CSS/JS frameworks du kan använda för att få sidan responsiv. Det mest populära är väl ändå bootstrap som ovanstående nämnde, men du har även Skeleton boilerplate, Less framework, Blueprint, gumby etc etc etc.

Bäst är väl att göra lite googlesökningar och hitta ett som du tror kommer passa ditt projekt bäst för alla ramverken är till för olika saker.

Varför skriker du för? Du borde se över ditt användande av utropstecken.

Du bör läsa mer om webdesign och vad som skiljer språken åt. PHP är backend och styr hur servern hanterar data. CSS, HTML och JavaScript är front-end (finns även JavaScript för back-end men det är överkurs i ditt fall). Front-end läses av clienter dvs Chrome eller FireFox etc, så det är inget "servern" behöver ha stöd för.

Istället för att treva i mörker som du gör nu, börja från början. Köp en bok och börja från sidan ett eller gå igenom W3schools guider (det duger som en början).

Hur mycket kan du om HTML & CSS?
Det är det enda du behöver, och alla webbsidor på nätet använder det, eftersom.. ja, alla webbsidor byggs på HTML & CSS.

CSS styr stilen på din webbsida, och där kan du även sätta brytpunkter för olika skärmstorlekar.
Ex: När webbläsaren går under 768px bredd ändras storleken på dina element på sidan för att passa den nya skärmstorleken.

Exempel på koden:

@media all and (max-width: 768px) {
     */ Allt här inne träder i kraft vid denna brytpunkt/bredd /*
}

.row:after {
content: "";
clear: both;
display: block;
}

När man använder float på ett element så "flyter" den automatiskt åt höger eller vänster. Så om du har flera element med float: left; kommer dessa lägga sig bredvid varandra. Det kan också skapa problem med att det förstör element utanför dessa flytande element. Koden ovan är till för att "inhägna" de flytande elementen innanför containern "row".

Har själv byggt ett ramverk för att lära mig, men inte blivit helt klar, du kan ta en titt på det så kanske du förstår principen. Testa även att förminska webbläsaren så ser du vad responsivt är.

http://fredrikw.se/work/grid/

.row:after {
content: "";
clear: both;
display: block;
}

Måste bara fråga, är det där best practice för att hålla float element innanför en div tex? Jag har alltid använt endast:

.row { overflow: auto; }

Skickades från m.sweclockers.com

Ingen aning vad som är best practice. Har googlat en del och del kommer upp några alternativ. Tror att det kan vara kompatiblet med fler webbläsare med det andra alternativet.

vad är det som "inte fungerar"? det du postar fungerar som jag förväntar mig iaf; är bredden på fönstret större än 450px, så blir bakgrunden svart, samt att diven blir 50% bred (vilket iofs inte syns eftersom texten är lite kort...).

Jag skulle kört agent detection i js och sedan applya rätt css utöver det. Nya mobiler kommer med 1920x1080 skärmar eller högre vilket gör media queries värdelösa.

fast agent detection är ju inte riktigt tillförlitligt. Till exempel så säger IE på Windows Phone 8 följande;

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

om jag inte har fattat fel, så är det just på grund av att en del kör agent detection som man säger att man är allt, för då får man allt också...

media queries tar väl hänsyn till pixel ratio också, så den fysiska upplösningen spelar ju mindre roll, eftersom det räknas fram en "logisk" upplösning som enheten använder när den tolkar eventuella media queries.