Čo chýba v odpovedajúcom dizajne webových stránok? - css, citlivý dizajn, mediálne dotazy

Moja koncepcia "Responsive Web Design" je:

• Navrhnite webové rozloženie, ktoré sa dobre rozširuje s akýmkoľvek monitorom šírky alebo mediálnou obrazovkou.
• Navrhnite webové rozloženie, ktoré sa stlačí taktiež s akýmkoľvek monitorom šírky alebo obrazovkou médií.
• Navrhnite webové rozloženie, ktoré sa dobre zobrazuje na akomkoľvek zariadení.
• Navrhnite rozloženie s percentom (%) namiesto pixelov (px).

Po spoločných konceptoch som teraz vlastnil niektoré pojmy v tomto bode, Som zmätený z:

• Navrhnite niečo ako rozloženie, posúvajte svojekoleso myši vidieť, ako to vyzerá, keď sa roztiahne alebo stláča na šírku rôznych médií. Stačí navrhnúť čokoľvek a potom urobiť CSS pre rôzne mediálne obrazovky / šírku zariadenia. Použite to @media screen and (max-width: 800px) { /* do Media CSS here; */ }a pridajte svoje NOVÝ CSS pre ľubovoľný prvok vášho rozloženia.
  ^{(Takže keď máte moc robiť čokoľvek s mediálnymi dopytmi jednoducho navrhujte s ľahkosťou. Po dokončení návrhu počítačového monitora dôraz na zariadenia alebo obrazovky s malými médiami a hrajte s CSS)}
  Predpokladajme, že style.css Špecifikoval som šírku header .somediv{ width: 100%; }, vo veľkosti 320px môžem špecifikovať šírku, čo sa mi páči ako @media screen and (max-width: 800px) { header .somediv{ width: 50%; } }.
• Keď niečo vyskočí z rozloženia, jednoducho vyčistiť float a vložte vec do zásobníka pred hlavným kontajnerom alebo po ňom.
• Urobte odpovedajúci CSS pre obrázky s img{ max-width: 100%; }.

Teraz pre moju spokojnosť a pokrok v citlivom svete, chcem, aby ste ma kritizovali - čo mám v súvislosti s citlivým CSS, ak myslím ako vyššie?

Alebo som úplne v poriadku s konceptom, potom prečo môj web je rozbitá v rozlíšení 320 px, zatiaľ čo nie na 800 pixelov, a nemôžem použiť rôzne CSS len pre 320 pixelov Musím určiť výšku hlavičky v rozmedzí 800px kde to platí len pre 320 pixlov?

odpovede:

2 pre odpoveď č. 1

Takže to vyzerá, akoby ste robili všetko správne, môžem vidieť problémy s vašou stránkou, ale len na hovorenie 640px ale 320px vyzerá dobre pre mňa.

Keď som prvýkrát začal reagovať návrhy som našiel túto webovú stránku: http://css-tricks.com/

Otvoril som ich štýl šablóny CSS a študoval som ho a zistil, ako to urobili.

Pre zmienku by som radil preskúmanie nasledujúcich odkazov na to, ako robiť reagujúce dizajn:

• Jednoduché citlivé obrázky s pozadím CSS - SmashingMagazine Mobile
• Sprievodca pre začínajúcich používateľov webových stránok - TeamTreeHouse.com blog
• Zodpovedný dizajn webu - Learn.ShayHowe.com
• Vytvárajte základné odpovedajúce stránky CSS - NetMagazine.com

Pokiaľ ide o získanie mediálnych dopytov, rád by som rád hľadal:

• Mediálne dopyty pre štandardné zariadenia

Existujú ľudia, ktorých viem, ktorí stále používajú php skripty na určenie rozlíšenia obrazovky používateľov a potom načítajú konkrétny štýl šablóny CSS, ktorý by som osobne neodporúčal, ale je to tiež možnosť.

Osobne by som sa pokúsil o zmenu vášho CSS, aby obsahoval nasledovné:

    @media only screen
and (max-width : 320px) {

#div1 {

width:100%;

}
}

Jediný spôsob, ako sa mi podarilo dostať túto prácu však je buď kopírovať celý CSS znova na túto konkrétnu obrazovku médií, alebo len špecifikovaním určitých divov na zmenu.

Pamätajte si, že môžete re-deklarovať styl CSS pre DIV alebo CLASS ďalej v spodnej časti štýlu

Dúfam, že vám to pomôže.

---