Yapılan site Mobil için nasıl uyumlu hâle getirilir?
N0rvecli
Kilopat
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- Türk Silahlı Kuvvetleri Uz. Çvş. Ad
Responsive Design Örnek Tasarım - SeoNet İnteraktif
HTML KODLARI <body> <div id=”wrapper”> <h1> Responsive test For Seo Blog </h1> </div> </body> CSS BÖLÜMÜ @media screen and (min-width:0px){ #wrapper{width:500px; height:150px; margin:auto; background:#00F; color:#fff; font-size:14px; text-align:center; }} @media screen and (min-width:1000px){...
seonet.com.tr
KS
KS
Soyluu25
Decapat
- Katılım
- 8 Ocak 2023
- Mesajlar
- 53
Daha fazla
- Cinsiyet
- Erkek
Responsive Design Örnek Tasarım - SeoNet İnteraktif
HTML KODLARI <body> <div id=”wrapper”> <h1> Responsive test For Seo Blog </h1> </div> </body> CSS BÖLÜMÜ @media screen and (min-width:0px){ #wrapper{width:500px; height:150px; margin:auto; background:#00F; color:#fff; font-size:14px; text-align:center; }} @media screen and (min-width:1000px){...seonet.com.tr
Olmadı yine yukarıda da H1 etiketi çıktı. Ben profesyonel değilim kusura bakmayın, biraz ayrıntılı anlatsanız olur mu?
Ascendency
Hectopat
- Katılım
- 15 Kasım 2020
- Mesajlar
- 3.483
- Makaleler
- 3
- Çözümler
- 24
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
Tek mesajda anlatabileceğimiz bir şey değil. Araştırma yapmalısınız.
N0rvecli
Kilopat
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- Türk Silahlı Kuvvetleri Uz. Çvş. Ad
Responsive Design Örnek Tasarım - SeoNet İnteraktif
HTML KODLARI <body> <div id=”wrapper”> <h1> Responsive test For Seo Blog </h1> </div> </body> CSS BÖLÜMÜ @media screen and (min-width:0px){ #wrapper{width:500px; height:150px; margin:auto; background:#00F; color:#fff; font-size:14px; text-align:center; }} @media screen and (min-width:1000px){...seonet.com.tr
Duyarlı web tasarımı veya duyarlı tasarım, kullanılabilirliği ve memnuniyeti sağlamak için web sayfalarının çeşitli cihazlarda ve pencere veya ekran boyutlarında minimumdan maksimum görüntü boyutuna kadar iyi görüntülenmesini amaçlayan bir web tasarımı yaklaşı mıdır?
Kısaca cihazın ekranına göre kendini uyarlıyor site.
Gnosis
Centipat
- Katılım
- 6 Aralık 2022
- Mesajlar
- 99
Daha fazla
- Cinsiyet
- Erkek
Bootstrap Media breakpointslerine bakmanı öneririm mesela @media CSS'i kullandıktan sonra her cihazın farklı genişlikleri olur örnek vermek gerekirse X-small cihaz <576px small <576 px large min-witdh 992 px gibi bu şekil min-Max px durak noktalarıyla uygun cihazlar için CSS'i düzenlemelisin sağ Click incele ye basarsan toogle device toolbar diye bir menu var orada tablet telefon vb nasıl gözüküyor istediğin modeli seçip siteni o cihazdan görebilirsin umarım yardımcı olabilmişimdir.
Picasso ZZ
Hectopat
- Katılım
- 31 Mayıs 2020
- Mesajlar
- 252
- Çözümler
- 3
Tavsiyem width height margin gibi komutları "%" veya "vh" kullanarak verin
i hope so
Picopat
- Katılım
- 18 Ocak 2023
- Mesajlar
- 272
- Çözümler
- 1
Bende aynı şeyi düşünüyorum ekrana göre şekil almasını sağlıyor öyle olunca fakat yinede bozulmalar oluyor maalesef. Küçük birkaç düzenleme ile mobile uyumlu hale getirebilirsiniz, bildiğiniz gibi. Kolay gelsin..
Lyo3
Hectopat
- Katılım
- 3 Mart 2022
- Mesajlar
- 69
- Çözümler
- 1
Daha fazla
- Cinsiyet
- Erkek
CSS ile bazı ayarlar yaparak mobil uyumlu hate getirebilirsiniz ancak neden uğraşansanız ki? Bu hem çok fazla zaman alır hem de net sonuçlar vermeyebilir. Her ekrana göre ayrı bir senaryo yazmanız gerekebilir. Yazı yazmak istiyorsanız, kalemi icat etmekle uğraşmaz, bir kırtasiyeye gidip kalem satın alırsınız
Özetle; Bootrstrap sizin için her şeyi yapmış, CDN olarak CSS dosyasını çekin ve kullanmaya başlayın. Resimleri mobil uyumlu yapmak için img tag içeriğine class="img-fluid" eklemeniz yeterli.
Ekstra yapacağınız pek fazla bir şey yok. Kendisi mobil ekrana geldiğinde gerekli düzenlemeleri yapacaktır.
