| Yazar |
Mesaj |
-
orphestudio
Acemi Üye
|
 21.05.2016, 15:08 (UTC)
Mesaj konusu: mobil tasarım hakkında |
|
|
siteme mobil tasarım yapmak istiyorum mobil tasarım için nerden başlamalıyım bilen biri varsa yardımcı olursa sevinirim... |
|
|
↑
|
|
 |
-
salihtoy
Bedava-Sitem Bağımlısı
|
21.05.2016, 22:05 (UTC)
Mesaj konusu: Re: mobil tasarım hakkında |
|
|
orphestudio yazmış: siteme mobil tasarım yapmak istiyorum mobil tasarım için nerden başlamalıyım bilen biri varsa yardımcı olursa sevinirim...
Tasarım / Tasarım ayarları bölümüne gidiniz. Orada "mobil" seçeneğini göreceksiniz. |
|
|
↑
|
|
|
-
orphestudio
Acemi Üye
|
22.05.2016, 11:12 (UTC)
Mesaj konusu: Re: mobil tasarım hakkında |
|
|
salihtoy yazmış: orphestudio yazmış: siteme mobil tasarım yapmak istiyorum mobil tasarım için nerden başlamalıyım bilen biri varsa yardımcı olursa sevinirim...
Tasarım / Tasarım ayarları bölümüne gidiniz. Orada "mobil" seçeneğini göreceksiniz.
ama mobil tasarıma göre tam olarak uyarlamıyor çok eksiklik oluyor mesela yüksekliklerde genişliklerde sayfanın çoğu şeyinde kaymalar oluyor bu sorunu nasıl giderebilirim ? |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
22.05.2016, 17:21 (UTC)
Mesaj konusu: |
|
|
Mobil sayfanın ID ve CLASS etiketlerine stil tanımlamaları yaparak her türlü sorunu giderebilirsiniz. Örneğin mobil tasarıma ait bazı ID ve CLASS etiketleri şunlardır:
.ui-body-c .ui-header .ui-content #nav-panel .ui-footer______________  |
|
|
↑
|
|
|
-
orphestudio
Acemi Üye
|
23.05.2016, 06:51 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Mobil sayfanın ID ve CLASS etiketlerine stil tanımlamaları yaparak her türlü sorunu giderebilirsiniz. Örneğin mobil tasarıma ait bazı ID ve CLASS etiketleri şunlardır:
.ui-body-c .ui-header .ui-content #nav-panel .ui-footer
tam olarak anlamadım mobil tasarım yerinde İd ,class yerleri yok bunları nasıl yapcaz anlamadım açık anlatırsan |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
23.05.2016, 12:40 (UTC)
Mesaj konusu: |
|
|
Tasarım > Mobil Tasarım > Bir alt sayfanın içerik metni (örneğin CSS kodu kullanılabilir) bölümünü ID ve CLASS etiketlerine stil tanımlamaları (yani CSS kodlaması) yapmak için kullanabilirsiniz. Daha net anlaşılabilmesi için bir örnek vermek gerekirse, ilgili bölüme şöyle bir kodlama girebilirsiniz: Kod: .ui-content {
width: 92%;
height: 92%;
padding: 6px 27px;
margin: 23px 27px;
overflow: visible;
background-color: #e3f2fd;
border: 1px solid #bbdefb;
box-shadow: 0 0 1em #90caf9;
font-size: 14px;
} ______________ |
|
|
↑
|
|
|
-
cixdizayn-forum
Bedava-Sitem Bağımlısı
Konum: Gereksiz Mesajlara Cevap Vermiyorum !..
|
23.05.2016, 12:49 (UTC)
Mesaj konusu: |
|
|
|
|
|
↑
|
|
|
-
orphestudio
Acemi Üye
|
23.05.2016, 14:21 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Tasarım > Mobil Tasarım > Bir alt sayfanın içerik metni (örneğin CSS kodu kullanılabilir) bölümünü ID ve CLASS etiketlerine stil tanımlamaları (yani CSS kodlaması) yapmak için kullanabilirsiniz. Daha net anlaşılabilmesi için bir örnek vermek gerekirse, ilgili bölüme şöyle bir kodlama girebilirsiniz: Kod: .ui-content {
width: 92%;
height: 92%;
padding: 6px 27px;
margin: 23px 27px;
overflow: visible;
background-color: #e3f2fd;
border: 1px solid #bbdefb;
box-shadow: 0 0 1em #90caf9;
font-size: 14px;
}
kendi sayfamın tasarım kodunu mobil tasarım koduna yapıştırsam oluyormu ? yoksa tekrardan ayrı bir tasarım kodumu yazmak gerekiyor ? |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
24.05.2016, 10:15 (UTC)
Mesaj konusu: |
|
|
Eğer BS'in mobil tasarımını kullanmak istiyorsanız, onun hazır tanımlamalarına uygun kodlama yapmalısınız. Eğer kendiniz bir mobil tasarım oluşturmak istiyorsanız, bunu istediğiniz şekilde hazırlayabilirsiniz. Lakin kodlarınızı doğrudan kopyalarsanız istediğiniz sonucu alamazsınız, genişlik veya aralık gibi değerlerde değişiklikler yapmanız gerekir. Tüm bunlarla uğraşmaktansa sitenizde kullandığınız tasarımı duyarlı hale dönüştürmenizi tavsiye ederim. ______________ |
|
|
↑
|
|
|
-
orphestudio
Acemi Üye
|
24.05.2016, 16:45 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Eğer BS'in mobil tasarımını kullanmak istiyorsanız, onun hazır tanımlamalarına uygun kodlama yapmalısınız. Eğer kendiniz bir mobil tasarım oluşturmak istiyorsanız, bunu istediğiniz şekilde hazırlayabilirsiniz. Lakin kodlarınızı doğrudan kopyalarsanız istediğiniz sonucu alamazsınız, genişlik veya aralık gibi değerlerde değişiklikler yapmanız gerekir. Tüm bunlarla uğraşmaktansa sitenizde kullandığınız tasarımı duyarlı hale dönüştürmenizi tavsiye ederim.
nasıl tam olarak açıklarsan anlamadım tam.sitedeki tasarımı duyarlı hale nasıl dönüştürüyoruz ?
En son orphestudio tarafından 24.05.2016 16:45:59 tarihinde değiştirildi, toplam 1 kere değiştirildi
|
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
25.05.2016, 02:49 (UTC)
Mesaj konusu: |
|
|
Duyarlı bir tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Örneğin duyarlı bir tasarım için; ekran çözünürlüğü 960px'ten küçük cihazlar için: Kod: @media only screen and (max-width: 960px) { } Ekran çözünürlüğü 801px ve 959px arasında olan cihazlar için: Kod: @media only screen and (min-width: 801px) and (max-width: 959px) { } gibi kodlamalar yapılabilir. Daha ayrıntılı bir örnek vermek gerekirse; Kod: @media only screen and (max-width: 960px) { .slobada{background:#000;color:#fff;width:100%;} }
@media only screen and (min-width: 801px) and (max-width: 959px) { .slobada{background:#ECE;color:#88F;width:85%;} } Site tasarımınıza ekleyeceğiniz bu gibi tanımlamalar, websitenizi daha duyarlı bir hale getirir. ______________ |
|
|
↑
|
|
|
-
orphestudio
Acemi Üye
|
25.05.2016, 08:04 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Duyarlı bir tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Örneğin duyarlı bir tasarım için; ekran çözünürlüğü 960px'ten küçük cihazlar için: Kod: @media only screen and (max-width: 960px) { } Ekran çözünürlüğü 801px ve 959px arasında olan cihazlar için: Kod: @media only screen and (min-width: 801px) and (max-width: 959px) { } gibi kodlamalar yapılabilir. Daha ayrıntılı bir örnek vermek gerekirse; Kod: @media only screen and (max-width: 960px) { .slobada{background:#000;color:#fff;width:100%;} }
@media only screen and (min-width: 801px) and (max-width: 959px) { .slobada{background:#ECE;color:#88F;width:85%;} } Site tasarımınıza ekleyeceğiniz bu gibi tanımlamalar, websitenizi daha duyarlı bir hale getirir.
mjobil tasarım kodu yazarken hep "@media only screen" kodunumu kullanıcaz her koda başlarken? |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
25.05.2016, 18:25 (UTC)
Mesaj konusu: |
|
|
Evet, duyarlı bir tasarım için medya sorguları kullanılır. Ayrıntılı bilgi için CSS 3 Media Queries veya CSS 3 Medya Sorguları aramalarına göz atabilirsiniz. ______________ |
|
|
↑
|
|
|
-
orphestudio
Acemi Üye
|
25.05.2016, 20:46 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Evet, duyarlı bir tasarım için medya sorguları kullanılır. Ayrıntılı bilgi için CSS 3 Media Queries veya CSS 3 Medya Sorguları aramalarına göz atabilirsiniz.
ozaman ben bunu tekrardan mobil olarak kodlucam baştan olarak ölemi yani aynı kodları bide mobil olarak uygulucaz ozaman ölemi ? |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
28.05.2016, 22:19 (UTC)
Mesaj konusu: |
|
|
Evet, eğer BS'in mobil tasarımını kullanmak istemiyorsanız, bu şekilde kodlarınızı duyarlı hale getirebilirsiniz. Eğer Medya Sorguları ile yapılan bu işlem de karmaşık geliyorsa, temel olarak duyarlılığı yüzdelik dilimler belirterek de sağlayabilirsiniz. Misal CSS içerisindeki width:80%; tanımlaması, hangi tarayıcıdan girilirse girilsin, ilgili içeriğin ekran genişliğine göre %80 genişlikte açılmasını sağlar. font-size:75%; tanımlaması, yine hangi tarayıcıdan girilirse girilsin, ilgili içeriğin yazılarının varsayılan font büyüklüğünden %25 daha küçük açılmasını sağlar gibi örnekler çoğaltılabilir... ______________ |
|
|
↑
|
|
|
|
