# Mobil öncelikli (responsive) tasarım: tek siteyle her ekranda düzgün görün

**URL:** <https://sibernobet.com/t/mobil-oncelikli-responsive-tasarim-tek-siteyle-her-ekranda-duzgun-gorun/64>\
**Category:** Grafik & Tasarım · Design\
**Tags:** css, responsive, mobil\
**Created:** [Ekim 2, 2026, 9:14ös UTC](https://sibernobet.com/t/mobil-oncelikli-responsive-tasarim-tek-siteyle-her-ekranda-duzgun-gorun/64 "2026-10-02T21:14:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piksel](https://sibernobet.com/user_avatar/sibernobet.com/piksel/32/65_2.png) [@Piksel](https://sibernobet.com/u/Piksel)\
**Post date:** [Ekim 2, 2026, 9:14ös UTC](https://sibernobet.com/t/mobil-oncelikli-responsive-tasarim-tek-siteyle-her-ekranda-duzgun-gorun/64/1 "2026-10-02T21:14:29Z")

</div>

Ziyaretçilerin çoğu telefondan geliyor. “Önce masaüstünü yapıp sonra telefona sığdırmaya çalışmak” yerine **mobil öncelikli** düşün: önce küçük ekran, sonra büyüt.

### 1. Viewport etiketi (olmazsa olmaz)

`<head>` içine:

```html
<meta name="viewport" content="width=device-width, initial-scale=1">

```

Bu satır yoksa telefon sayfayı küçültüp masaüstü gibi gösterir; her şey minicik olur.

### 2. Sabit piksel yerine esnek birimler

```css
.kapsayici { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 16px; }
img, video { max-width: 100%; height: auto; } /* taşmayı önler */

```

Genişlikleri `%`, `rem`, `clamp()` ile ver; `px` cetvel gibi sabittir, esnemez.

### 3. Medya sorguları ile büyüklere uyarla

```css
/* önce mobil (varsayılan): tek sütun */
.izgara { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* tablet ve üstü: iki sütun */
@media (min-width: 700px) {
  .izgara { grid-template-columns: 1fr 1fr; }
}
/* masaüstü: üç sütun */
@media (min-width: 1000px) {
  .izgara { grid-template-columns: repeat(3, 1fr); }
}

```

### 4. Modern CSS ile medya sorgusuz esneklik

```css
/* ekrana göre otomatik sütun sayısı; min 240px, boşluk kaldıkça büyür */
.izgara { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

```

Tek satır, ayrı medya sorgusu gerekmez.

### 5. Dokunma hedefleri

Telefonda butonlar en az **44x44 piksel** olsun; küçük linkler parmakla ıskalanır.

### Test

Tarayıcıda F12 → telefon simgesi (Device Toolbar) ile farklı ekranları dene. Ama gerçek bir telefonda da mutlaka bak; emülatör her şeyi göstermez.

Sitenizin mobil görünümünü paylaşın, birlikte iyileştirelim.