lostyazilim
tr.link

Nasıl Mobil Uyumlu Hale Getirebilirim?

4 Mesajlar 650 Okunma
acebozum
tr.link

darknov4 darknov4 WM Aracı Kullanıcı
  • Üyelik 06.03.2017
  • Yaş/Cinsiyet 26 / E
  • Meslek Öğrenci
  • Konum KKTC
  • Ad Soyad V** S**
  • Mesajlar 3084
  • Beğeniler 1387 / 910
  • Ticaret 29, (%100)
css kodları aşağıdaki gibi bunu nasıl mobil uyumlu hale getirebilirim



/*
$darkgreen:#1db954;
$lightgreen:#1ed760;
*/
body {
margin:0;
padding:0;
font-family:Circular,Helvetica,Arial,sans-serif;
background-image:url("https://www.xmple.com/wallpaper/blue-pink-gradient-linear-1920x1080-c2-ff69b4-87ceeb-a-15-f-14.svg");
background-size:cover;
overflow-x:hidden;
}
h1 {
color:white;
font-size:80px;
cursor:default;
}
h2 {
font-size:3em;
}
h3 {
font-size:1.5em;
}
p {
font-size:18px;
line-height: 25px;
}
td {
width:50%;
}

nav ul {
width:100%;
top:0;
position:fixed;
margin:0;
padding:5px;
background-color:rgba(21,21,21,.65);
height:70px;
}
nav ul li:not(.image){
float:right;
list-style-type:none;
margin:15px 10px 10px 10px;
padding:12.5px;
height:25px;
color:white;
font-size:14px;
font-family: Circular,Helvetica,Arial,sans-serif;
}
nav ul li a {
color:white;
text-decoration:none;
}
nav ul li a.login {
color:rgb(220,220,220);
}
nav ul li:first-child {
float:left;
}
nav ul li.rightend {
margin-right:50px;
}
nav ul li img {
height:40px;
margin:17.5px;
margin-left:75px;
}
nav ul li a {
cursor:pointer;
transition-duration:250ms
}
nav ul li a:hover {
transition-duration:250ms;
color:#1e60d7;
}
nav ul li a div.list-border {
cursor:default;
width:1px;
height:25px;
background-color:white;
margin-top:-5px;
}

div.header {
width:100%;
height:440px;
text-align:center;
padding:215px 5px 5px 5px;
margin:0;
}
.arrow {
font-family:'IBM Plex Serif', serif;
color:white;
font-size:68px;
display:inline-block;
position:absolute;
top:230px;
cursor:pointer;
}
.right-arrow{
float:right;
right:50px;
}
.left-arrow {
float:left;
left:50px;
}
.button {
font-size: 14px;
letter-spacing:2px;
color:white;
padding:15px 50px;

width:250px;
border-radius: 90px;
margin:10px;

cursor:pointer;
transition-duration:500ms;
}
.btn-green {
background-color:#1d54b9;
border:3px #1d54b9 solid;
}
.btn-white {
background-color:rgba(0,0,0,0);
border:3px white solid;
}
.btn-green:hover {
transition-duration:500ms;
background-color:#1e60d7;
border-color:#1e60d7;
}
.btn-white:hover {
transition-duration:500ms;
background-color:white;
color:black;
}

table {
width:100%;
height:auto;
font-family: 'Source Sans Pro', sans-serif;
}
table.about {
background-color:white;
padding:50px 75px;
}
table.easy {
color:white;
padding:50px 75px;
}
table.account {
background-color:white;
padding:50px 75px;
}
.phone {
background-color:rgba(255,255,255,.5);
width:315px;
height:500px;
border-radius:30px;
border-style:solid;
border-color:white;
border-width:3px 3px 0 3px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
margin-bottom:-120px;
}
.album {
height:555px;
width:555px;
padding:0;
margin:0;
box-shadow:0px 0px 2px black;
float:right;
}
.account-list {
list-style-type:disc;
}
.platform li, .device li {
transition-duration:250ms;
color:rgb(220,220,220);
float:left;
margin:15px;
}
.platform li b {
color:#1d54b9;
cursor:pointer;
}
.platform li:first-child, .device li:first-child{
list-style-type: none;
display:block;
margin-left:-25px;
}
.platform li b:hover {
transition-duration:250ms;
color:#1e60d9;
}
.device li b {color:black;}
 

 

wmaraci
reklam

carasar carasar All ızz well... Kullanıcı
  • Üyelik 29.10.2016
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad O** K**
  • Mesajlar 1116
  • Beğeniler 499 / 498
  • Ticaret 16, (%100)
@media (max-width:600px){
kodları buraya yazacaksınız
}


600px alanını dilediğin gibi değiştirerek farklı ekran boyutlarında farklı css komutları yazabilirsin. Bunu canli olarak test ederek kendine göre en uygun font büyüklüğü, listeleme ve hidden değerlerini verebilirsin.
 

 

darknov4 darknov4 WM Aracı Kullanıcı
  • Üyelik 06.03.2017
  • Yaş/Cinsiyet 26 / E
  • Meslek Öğrenci
  • Konum KKTC
  • Ad Soyad V** S**
  • Mesajlar 3084
  • Beğeniler 1387 / 910
  • Ticaret 29, (%100)
olmuyor hocam ya ne yaptıysam carasar
 

 

carasar carasar All ızz well... Kullanıcı
  • Üyelik 29.10.2016
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad O** K**
  • Mesajlar 1116
  • Beğeniler 499 / 498
  • Ticaret 16, (%100)
Kod yapında gördüğüm kadarıyla sabit değerler verilmiş bunlar sıkıntı oluşturuyordu. width ve height değerleri px cinsinden verilmiş. Em ya da percent kullanılabilir. Ölçü birimleri hakkında bilgin yoksa linkini verdiğim makalede farklarını görebilirsin. Kolay gelsin.

http://www.gozdeberberoglu.com/2009/02/17/em-px-pt/
darknov4

kişi bu mesajı beğendi.

wmaraci
wmaraci
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al