Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:css:css_mobilon

< CSS

CSS Mobilon

Weboldal mobil megjelenése

Manapság az internetezők nagy része mobilon keresztül éri el a weboldalakat. A webáruházak tulajdonosainak fontos, hogy mobilon is könnyen lehessen vásárolni, az árukat nézegetni, mustrálni.

Két lehetőségünk van. Vagy úgy csináljuk meg a weboldalt, hogy az minden platformon (még mobilon is), használható és kényelmes legyen, vagy a mobil platformokra külön weboldalt készítünk. Az első a nehezebb. Egy oldallal akkor se legyen probléma, ha böngészőt átméretezzük, vagy mobil eszközről nézzük, ez a legnehezebb feladat.

A második esetben a weboldalnak persze nem is feltétlen kell másik különálló weblapokból állnia. Lehet ugyanaz a weboldal, csak más stíluslappal. Ha a tartalom adatbázisból jön, akkor ezzel persze nem is lesz problémánk.

A csak mobileszközre szánt tartalmakat gyakran úgy érjük el, hogy a használt domain elé egy „m” aldomaint gépelünk, tulajdonképpen a „www” helyére. Például: http://m.sajatdomain.hu

Mobilra szánt weboldal

index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Reg</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
  <h3>Regisztráció</h3>
  <form>
    <label for="nev">Név:</label>
    <input type="text" id="nev" placeholder="Vezetéknév Keresztnév">
    <label for="web">Weboldal:</label>
    <input type="url" id="web" placeholder="www.sajatdomain.hu">
    <label for="tel">Telefon:</label>
    <input type="text" id="tel" placeholder="+36 (30) 123-4567">
    <label for="email">E-mail:</label>
    <input type="email" id="email" placeholder="joska@sajatdomain.hu">
    <label for="pass">Jelszó:</label>
    <input type="password" id="pass" placeholder="titok">
    <label for="hazas">Házas:</label>
    <input type="checkbox" id="hazas"><br>
 
    <button type="submit">Rögzít</button>
  </form>
</body>
</html>
style.css
input[type=text],
input[type=password],
input[type=url],
input[type=email] {
  -webkit-appearance: none; 
  -moz-appearance: none;
  margin: 0;
  border: 1px solid #bbbbbb;
  display: block;  
  width: 100%; 
  height: 40px;
  line-height: 40px; 
  font-size: 20px;  
}
 
input[type=checkbox] {
  width: 44px; 
  height: 44px;
  border-radius: 22px;
  border-style: solid;
  border-width: 1px;
  border-color: #bbbbbb;
}
 
button[type=submit] {
  -webkit-appearance: none; 
  -moz-appearance: none;
 
  display: block;
  width: 100%;
  height: 2.5em;  
  margin: 1.5em 0;
  font-size: 1em; 
  line-height: 2.5em;
  color: #333;
  font-weight: bold;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); 
  background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); 
    background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); 
  background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); 
  background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); 
  background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
 border-style: solid;
  border-width: 1px;
  border-color: #bbbbbb;  
 border-radius: 10px;
}
body{
  background: -webkit-linear-gradient(right, #fdfdfd, #bebebe);
}

Linkek

oktatas/web/css/css_mobilon.txt · Utolsó módosítás: 2019/08/22 19:40 szerkesztette: admin