Việc thiết kế web phù hợp với nhiều thiết bị khác nhau, đặc biệt là trên các thiết bị di động như ipad, iphone là xu hướng mà bất kì một font end developer nào cũng phải nắm vững. Để các bạn có thêm kinh nghiệm trong lĩnh vực này, mình xin chia sẻ với các bạn một ví dụ đơn giản là tạo form người dùng với chức năng responsive, đáp ứng hầu hết trên các màn hình với kích thước khác nhau.
Bước 1 : Tạo HTML Markup
<section id="container">
<a href="http://sharecode.vn" title="thu thuat web"> Back to sharecode.vn </a>
<h2>Responsive Form Elements</h2>
<form name="responsive" id="responsive-form" method="post" action="#">
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">
<input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="2" class="txtinput">
<input type="url" name="website" id="website" placeholder="Website URL" autocomplete="off" tabindex="3" class="txtinput">
<input type="tel" name="telephone" id="telephone" placeholder="Phone number?(optional)" tabindex="4" class="txtinput">
<textarea name="message" id="message" placeholder="Enter a cool message..." tabindex="5" class="txtblock"></textarea>
</section>
<section id="aside" class="clearfix">
<section id="recipientcase">
<h3>Recipient:</h3>
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="staff">Site Staff</option>
<option value="editor">Editor-in-Chief</option>
<option value="technical">Tech Department</option>
<option value="pr">Public Relations</option>
<option value="support">General Support</option>
</select>
</section>
<section id="prioritycase">
<h3>Priority:</h3>
<span class="radiobadge">
<input type="radio" id="low" name="priority" value="low">
<label for="low">Low</label>
</span>
<span class="radiobadge">
<input type="radio" id="med" name="priority" value="med" checked="checked">
<label for="med">Medium</label>
</span>
<span class="radiobadge">
<input type="radio" id="high" name="priority" value="high">
<label for="high">High</label>
</span>
</section>
</section>
</div>
<!-- BUTTON -->
<section id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">
<br style="clear:both;">
</section>
</form>
</section>
Các bạn chú ý : Để có thể tạo chức năng responsive cho website , các bạn nhớ chèn đoạn code sau ngay bên dưới thẻ <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Bước 2 : Tạo css
Chúng ta sẽ tạo ra 2 file css và đặt tên lần lượt là style.css chứa hầu hết các định dạng thông thường cho các màn hình máy tính vàresponsive.css chứa các định dạng cho các thiết bị di động.
Bước 2.1 Trước hết chúng ta sẽ từng bước định dạng ở phần style.css
Đầu tiên là các định dạng cơ bản
html {
margin: 0;
padding: 0;
}
body {
background: url("images/body-bg.jpg") repeat scroll 0 0 #FFFFFF;
color: #333333;
font-family: "Trebuchet MS",Arial,Tahoma,sans-serif;
font-size: 62.5%;
height: 101%;
padding-top: 10px;
}
a {
color: #4681DA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h2 {
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
color: #363636;
font-family: "Droid Serif",Georgia,serif;
font-size: 2.6em;
font-weight: 500;
line-height: 1.8em;
margin-bottom: 25px;
margin-top: 25px;
padding: 12px 0;
text-align: center;
}
h3 {
font-size: 1.44em;
font-weight: bold;
letter-spacing: -0.04em;
margin-bottom: 10px;
}
#container {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 6px 6px 6px 6px;
display: block;
margin: 5px auto 66px;
max-width: 800px;
padding: 20px 15px;
}
#responsive-form #slider {
width: 60%;
}
#responsive-form #aligned {
float: left;
margin-right: 50px;
width: 450px;
}
#responsive-form #aside {
float: left;
padding: 0;
width: 250px;
}
#wrapping {
width: 100%;
}
#buttons {
display: block;
padding-top: 10px;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Kế tiếp là các phần tử trong form
#responsive-form{ box-sizing:border-box;}
#responsive-form .txtinput{
display:block;
font-family:Arial, Helvetica, sans-serif;
border-style:solid;
border-width:1px;
border-color:#dedede;
margin-bottom:20px;
font-size:1.55em;
padding:11px 25px;
padding-left:55px;
width:90%;
color:#777;
box-shadow:0 1px 3px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1) inset;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1) inset;
transition:border 0.15s linear 0s,box-shadow 0.15s linear 0s,color 0.15s linear 0s;
-webkit-transition:border 0.15s linear 0s,box-shadow 0.15s linear 0s,color 0.15s linear 0s;
-moz-transition:border 0.15s linear 0s,box-shadow 0.15s linear 0s,color 0.15s linear 0s;
}
#responsive-form .txtinput:focus{
color:#333;
border-color:rgba(41,92,161,0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}
#responsive-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
font-size: 1.5em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#responsive-form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none;
}
Ảnh đại điện cho từng phần tử
#responsive-form input#name {
background: url("images/user.png") no-repeat scroll 5px 4px #FFFFFF;
}
#responsive-form input#email {
background: url("images/email.png") no-repeat scroll 5px 4px #FFFFFF;
}
#responsive-form input#website {
background: url("images/website.png") no-repeat scroll 5px 4px #FFFFFF;
}
#responsive-form input#telephone {
background: url("images/phone.png") no-repeat scroll 5px 4px #FFFFFF;
}
#responsive-form textarea.txtblock {
background: #fff url('images/speech.png') 5px 4px no-repeat;
}
Những hình ảnh sử dụng bên trên các bạn có thể tìm thấy ở phần download. Kế tiếp là cho các nút radio và select
span.radiobadge{
display:block;
margin-bottom:8px;
}
span.radiobadge label{
font-size:1.2em;
padding-bottom:4px;
}
select.selmenu{
font-size:17px;
color:#676767;
padding:9px !important;
border:1px solid #aaa;
width:200px;
}
Cuối cùng là cho phần buttons
#buttons #submitbtn{
display:block;
float:left;
height: 3em;
padding: 0 1em;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 1.3em;
color: #fff;
text-shadow: 0px 1px 0px #222;
white-space:nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-color: #5e890a #5e890a #000;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
background-color: rgb(226,238,175);
background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38)));
background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
border-color: #7c9826 #7c9826 #000;
color: #fff;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
background: rgb(228,237,189);
background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54)));
background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);
background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );
}
#buttons #resetbtn {
display: block;
float: left;
color: #515151;
text-shadow: -1px 1px 0px #fff;
margin-right: 20px;
height: 3em;
padding: 0 1em;
outline: 0;
font-weight: bold;
font-size: 1.3em;
whitewhite-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #fff;
background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
border: 1px solid #969696;
box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
#buttons #resetbtn:hover {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #818181;
background-color: #fff;
background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-color: #aeaeae;
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
}
Bước 2.2 : Trong bước này là trọng tâm của bài viết này, chúng ta sẽ tạo chức năng responsive cho form
@media screen and (max-width:800px){
body{ padding:10px 15px;}
#container{
width:100%;
}
#responsive-form #aligned{
width:100%;
float:none;
display:block;
}
#responsive-form #aside {
width: 100%;
display: block;
float: none;
}
#responsive-form .txtinput, #responsive-form textarea {
width: 85%;
}
#prioritycase {
float: left;
display: block;
}
#recipientcase {
float: left;
display: block;
margin-right: 55px;
}
}
* smaller screen dropoff *******/
@media only screen and (max-width: 550px) {
#responsive-form .txtinput, #responsive-form textarea {
width: 80%;
}
}
/* iPhone Landscape ********/
@media only screen and (max-width: 480px) {
body {
padding: 10px 0px;
}
#responsive-form .txtinput, #responsive-form textarea {
width: 60%;
}
select.selmenu {
width: 190px;
}
}
/* iPhone portrait *******/
@media only screen and (max-width: 320px) {
body {
padding: 10px 0px;
}
#responsive-form .txtinput, #responsive-form textarea {
width: 70%;
}
#responsive-form #aligned {
overflow: hidden;
}
select.selmenu {
width: 160px;
}
#recipientcase {
margin-right: 30px;
}
}
Với việc khai báo @media only screen and (max-width: 320px) , trong đó max-width là các kích thước mà chúng ta muốn chỉ định form chúng ta sẽ hiển thị ra sao khi ở kích thước đó, rồi định dạng cho phù hợp là okie. Rất đơn giản phải không các bạn.
Hy vọng với bài viết đơn giản này, sẽ giúp ích cho các bạn trong quá trình thiết kế web của mình.