Jak zastavím přechod prvků při změně velikosti prohlížeče v HTML / CSS?


Odpověď 1:

I když vám Bootstrap může pomoci, pokud váš web již není v bootstrapu - nechtěl bych se do tohoto problému ponořit.

Zní to, jako byste potřebovali mediální dotaz ve vašem CSS přímo v rozlišení, kde začnete vidět toto překrývání. Jakmile toto rozlišení dosáhnete, budete muset tento problém vyřešit. Řešením může být řada věcí, například umístění loga na jednu „linii“ nastavením šířky loga na 100% (nebo kontejneru loga na 100% a vystředění skutečného loga) a poté zahájit test na samostatný řádek.

Možná budete muset udělat i jiné věci, například odstranit prvky, které opravdu nepotřebujete v tomto menším rozlišení (například prezentace, atd.).

Kdybych to byl já, tak bych zůstal u vašeho aktuálního CSS (nechoďte bootstrap, pokud jej již nepoužíváte). Řekli jste, že se učíte reagovat na design webových stránek a nejlepším způsobem, jak se to naučit, je dostat se do těchto situací a najít cestu ven pomocí čistě CSS. Bootstrap je úžasný, ale dělá pro vás spoustu věcí - eliminuje některé procesy učení.

Hodně štěstí


Odpověď 2:

Chtěl bych odpovědět na část otázky, která zahrnuje překrývající se prvky.

Zobrazili jste logo a nadpis vedle sebe, vpravo. Teď, když je to hotovo

display: inline-block

automaticky spadne nebo spadne na jeden řádek.

Plovoucí prvky

také není do jednoho sloupce, pokud není dostatek místa. Ale pokud nechcete zobrazit ten ošklivý vodorovný posuvník (zejména pravý plovoucí prvek se zápornými okraji) než

  1. float: žádný

udělá práci.

Pokud jste použili

vlastnost position

umístit prvek, než nejlepší způsob je jejich nastavení

statický

nebo upravte svislou a vodorovnou polohu, když se rozložení rozbije pomocí mediálních dotazů

  1. @media (max-width: 400px) {logo, title {position: static; }}

Doufám, že to pomůže.


Odpověď 3:

Můžete použít buď responzivní rámce, které vykonávají práci za vás, některé příklady,

  • Bootstrap · Nejoblíbenější front-end framework pro mobilní zařízení na světě.
  • Citlivý CSS boilerplate

Nebo použijte zabudovanou funkci HTML5 nazvanou mediální dotazy.

Dotazy na média umožňují změnit vlastnosti CSS prvků podle velikosti okna prohlížeče.

Více o tom, jak je používat zde,

  • Mediální dotazy pro standardní zařízení Triky CSS
  • Používání mediálních dotazů

Na zdraví!


Odpověď 4:

To se vždy stane, pokud nezačnete používat systém mřížky bootstrap, pomůže vám to hodně s polohovacími prvky bez obav z jejich chování na jiných zařízeních, jako jsou mobily nebo tablety, jako kdybyste si vybrali, co chcete, aby každá věc vypadala navíc - malé, malé, střední nebo velké obrazovky

tento systém Grid vám pomůže uspořádat obrazovku takto:

takže chcete čelit problému znovu, protože funguje jako dynamická sada sloupců a řádků.

mohli byste odsadit tento odkaz bootstrapu hostovaného z CDN (doručování v obsahové síti) pod odkazem css v html souboru a začít pracovat s bootstrapem:

Poznámka:

bootstrap je css framework, který vám pomůže přestavět kolo a začít s tím, co ostatní končí, pomůže vám v obrázcích, tlačítkách, nav-barech…. atd.

existuje odkaz na bootstrap, pokud se chcete dozvědět více:

CSS · Bootstrap


Odpověď 5:

Můžete použít bootstrap, což je jednodušší způsob

nebo

můžete použít metaznačku

které byste měli použít na všech svých webových stránkách.

Spolu s ním používejte správně css (relativní polohování, mediální dotazy a zarovnání), které znáte. Pro další znalosti klikněte na tento odkaz w3schools

Citlivý úvod do webdesignu