Neler yeni

Yeni Html Css Mobil Web Nasil yapiliyor (1 Viewer)

Mesajlar
70
Credits
0
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width/"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"/>
<title></title>
<style type="text/css">
body{
margin:0 auto;
height:1000px;
width:1000px;
overflow: scroll;
background-color: silver;

}


#ana{
height: 600px;
width: 1000px;
}






#menu{
height: 50px;
width: 10px;
background-color: blueviolet;
box-shadow: 5px 1px 5px 2px blueviolet;
z-index: -1;

}
#analogo{
height: 100px;
width: 100px;
background-color: silver;
position: fixed;
top: 1;
left: 20px;
border-radius: 50px 50px;
z-index: 3;

}
#apple{
height: 100px;
width: 100px;


}

#solreklam{
height: 600px;
width: 150px;
background-color: black;
position: fixed;
top: 200px;
left: 10px;
z-index: -2;

}
#sagreklam{
height: 600px;
width: 150px;
background-color: black;
position: fixed;
top: 200px;
right: 10px;
z-index: 2;
}



#acıklamasol{
height: 600px;
width: 200px;
background-color: black;
position: absolute;
top: 1300px;
left: 10px;


}
#bos{
height: 1500px;
width: 300px;
background-color: silver;
position: absolute;
top: 1200px;
left: 10px;
z-index: -1;

}
#kullanıcıaktıvıte{
height: 1400px;
width: 1300px;
position: absolute;
top: 200px;
left: 300px;
background-color: blueviolet;

}
#kullanıcıfoto{
height: 150px;
width: 150px;
float: left;
border-radius: 75px 75px;
background-color: white;
margin: 10px;
}
#kullanıcımenu2{
height: 50px;
width: 1050px;
float: right;
background-color: white;
border-radius: 0px 15px;
position: absolute;
top: 20px;
left: 190px;

}
#kullanıcıhakkında{
height: 250px;
width: 150px;
float: left;
background-color: white;
border-radius: 10px 15px;
position: absolute;
top:180px ;
left: 10px
;
}
#kullanıcııcerık{
height: 500px;
width: 1000px;
background-color: white;
position: absolute;
top: 140px;
left: 220px;
}
#kullanıcıhaber1{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 750px;
left: 150px;
}
#kullanıcıhaber2{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 1050px;
left: 150px;
}
#kullanıcıhaber3{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 750px;
left: 500px;
}
#kullanıcıhaber4{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 1050px;
left: 500px;
}
#kullanıcıhaber4{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 1050px;
left: 500px;
}
#kullanıcıhaber5{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 750px;
left: 850px;
}
#kullanıcıhaber6{
height: 250px;
width: 300px;
background-color: white;
position: absolute;
top: 1050px;
left: 850px;
}
#enalt{
height: 720px;
width: 1900px;
background-color: black;
position: absolute;
top: 2000px;
z-index: 1;

opacity: 0.1;
box-shadow: 10px 10px 10px 10px;

}














</style>
</head>
<body>
<div id="ana">
<div id="menu">
<div id="analogo"> <img id="apple"src="resimler/msg.png"></div>


</div>
<div id="menualtıcızgı"></div>
<div id="solreklam"></div>
<div id="sagreklam"></div>
<div id="acıklamasol"></div>
<div id="bos"></div>
<div id="kullanıcıaktıvıte">
<div id="kullanıcıfoto"></div>
<div id="kullanıcımenu2"></div>
<div id="kullanıcıhakkında"></div>
<div id="kullanıcııcerık"></div>
<div id="kullanıcıhaber1"></div>
<div id="kullanıcıhaber2"></div>
<div id="kullanıcıhaber3"></div>
<div id="kullanıcıhaber4"></div>
<div id="kullanıcıhaber5"></div>
<div id="kullanıcıhaber6"></div>
</div>

<div id="enalt"></div>
</div>





Boyle Mi oluyor Mobil Icin Mobil olmuyorsa Widht height ayari yapabilrimisiniz



</body>
</html>
 

Memori

#!/usr/bin/python
uzmannnnn
Mesajlar
912
Credits
2,557
Kardeşim mobil için media screen eklemen lazım yani telefonlara ve tabletlere özel bir max width değer vermen gerekir çünkü yazdığın şeyleri sığdırabilmen için şu şekil



<h2>Test</h2>

<style>

h2{
font-size: 50px;
}

@media screen and(max-width: 500px){
h2{
font-size: 30px;
}

}
</style>
Burda yapmış olduğum ekranımızın çözünürlüğü eğer 500px değerinin üstündeyse ilk yazdığım h2 font-size: 50px devreye girer ama eğer 500px altındaysa 2. yazdığım h2 font-size 30px devreye girer
 

Bu konuyu görüntüleyen kullanıcılar