[Theme Development] Phần 6: Viết CSS cho giao diện Mobile-first – phần 2
Trong phần 5 chúng ta đã bắt đầu viết một xíu CSS cho giao diện website theo chuẩn Mobile-first, thế nhưng có một điều mình muốn cho bạn biết là trong đoạn CSS đó có một vài chỗ bị thiếu và nhân bài này chúng ta sẽ tiếp tục viết thêm cũng như fix lại một số thiếu sót nhé.
Bổ sung phần 5
Trước tiên là ta sẽ fix lại các hàm minxin trong LESS. Vì phần trước mình làm mixin mà quên bỏ cặp dấu () vào sau tên class nên nó sẽ in ra như là một đoạn CSS bình thường, rất tốn dung lượng.
Bạn mở file variabless.less ra, tìm
.button {
Và thay thành
.button() {
Tiếp tục chèn thêm đoạn sau để tạo thêm một hàm (hay còn gọi là mixin) nữa để trang trí form, bởi vì trong giao diện trước mắt là ta sẽ có 2 form đó là khung tìm kiếm và khung đăng ký nhận tin, nên sử dụng hàm sẽ tiết kiệm thời gian hơn.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | .form() { background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top: 2px; position: relative; input { border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type="text"] { padding: 0.5em; width: 80%; height: 42px; &:focus { outline: none } } input[type="submit"] { position: absolute; right: 2px; -moz-box-shadow:inset 0px 1px 0px 0px #f5f5f5; -webkit-box-shadow:inset 0px 1px 0px 0px #f5f5f5; box-shadow:inset 0px 1px 0px 0px #f5f5f5; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fafafa), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #fafafa 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff'); background-color:#fafafa; -webkit-border-top-left-radius:4px; -moz-border-radius-topleft:4px; border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius-topright:4px; border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; border-bottom-right-radius:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px; text-indent:0px; border:1px solid #ededed; display:inline-block; color:#8c8c8c; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:57px; text-decoration:none; text-align:center; &:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #fafafa) ); background:-moz-linear-gradient( center top, #ffffff 5%, #fafafa 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa'); background-color:#ffffff; } &:active { position:relative; top:1px; } }} //end .form |
Tiếp tục mở file style.less, tìm .search { và xóa toàn bộ code tạo form trong đó đi, sau đó viết thành
1 2 3 | .search { .form;} //end .search |
Tiếp tục tìm đến #footer { và thay toàn bộ code của nó thành..
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | /*--Footer--*/#footer { clear: both; background: @color-background-black; color: #fff; font-size: 0.8em; padding: 0.3em 1.5em; .optin-form { .form; } .col-3 { .row(12); ul { list-style: none; padding: 0; .row(12); } }} //end #footer |
Ok, bây giờ bạn xem lại thì có thể thấy form bây giờ chuẩn hơn và footer cũng đẹp hơn rồi phải không
Do bài trước mình chỉ bạn chèn các file mobile.css, desktop.css, tablet.css vào file index.html bị sai một xíu, cụ thể là quên ghi thư mục css trước tên file. Bạn hãy sửa lại như thế này nhé.
1 2 3 | <link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (min-width: 18.750em)" /><link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width: 34.375em)" /><link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 48em)" /> |
Sửa thẻ HTML tạo menu
Trên di động kích thước có hạn nên việc hiển thị menu bình thường sẽ rất tốn diện tích nếu bạn có nhiều phần tử trong đó. Và nếu bạn có menu con, thì chúng ta không thể dùng hiệu ứng rê chuột vào như bình thường hay dùng để hiển thị các menu con được vì trên di động chúng ta không có khái niệm “rê chuột” mà chỉ có click hoặc kéo.
Như vậy, ở đây mình sẽ lấy kiểu menu đơn giản dành cho di động là sẽ tạo một cái nút bấm, khi bấm vào thì menu sẽ hiển thị ra.
Trước tiên, bạn mở lại file index.html và tìm
1 | <div class="header-menu"> |
Sau đó chèn thêm một thẻ a nằm bên dưới nó mang class .show-menu như thế này
1 | <a href="#" class="show-menu">Menu</a> |
Tiếp tục thêm một vài menu con, ở đây là mình sẽ thêm menu con cho menu Dịch vụ. Tìm
1 | <li><a href="#">Dịch vụ</a></li> |
Sửa thành
1 2 3 4 5 6 7 8 | <li> <a href="#">Dịch vụ</a> <ul> <!--Start sub menu--> <li><a href="#">Thiết kế web</a></li> <li><a href="">SEO</a></li> <li><a href="">Quản trị</a></li> </ul> <!--end sub menu--></li> |
Kết quả bây giờ ta có code HTML tạo menu như thế này
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <div class="header-menu"> <a href="#" class="show-menu">Menu</a> <ul> <li><a href="#">Trang chủ</a></li> <li><a href="#">Liên hệ</a></li> <li> <a href="#">Dịch vụ</a> <ul> <!--Start sub menu--> <li><a href="#">Thiết kế web</a></li> <li><a href="">SEO</a></li> <li><a href="">Quản trị</a></li> </ul> <!--end sub menu--> </li> <li><a href="#">Hợp tác</a></li> </ul></div> |
Nhìn trên trình duyệt ta có
Chưa hết, do lúc tạo menu chúng ta sẽ sử dụng jQuery và jQuery UI để thêm hiệu ứng nên ta cần chèn cái này vào file index.html. Nhưng bản mẫu mình gửi đã được chèn jQuery sẵn rồi nên bây giờ bạn chỉ cần chèn thêm jQuery UI.
Bạn tìm
1 | <!--Chèn jQuery--> |
Chèn vào dưới nó
1 | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> |
Xong phần chuẩn bị, bây giờ ta bắt đầu viết CSS cho cái menu và tất cả các thành phần khác trên giao diện nhé.
Viết CSS giao diện điện thoại di động (mobile)
Trước hết, bạn mở file mobile.less trong thư mục less_file và viết đoạn sau.
1 2 3 4 5 | @media screen and (min-width: 18.750em) { // Bạn sẽ viết CSS vào phần trống này //} //end media query |
Bạn có thể hiểu đơn giản là khi viết CSS vào giữa cặp thẻ @media kia thì nó chỉ thực thi các đoạn CSS khi chiều rộng của trình duyệt có ít nhất là 18.750em, tương đương 281px nếu bạn đặt font-size: 93.8% cho body nếu bạn làm theo mình ở phần 5.
Như vậy, bây giờ ta viết CSS vào // Bạn sẽ viết CSS vào phần trống này // thì nó sẽ thực thi trên cả điện thoại lẫn desktop. Nhưng yên tâm là sau này ta sẽ viết lại cho từng min-width khác nhau. Đừng quên sử dụng Viewport Resizer để test giao diện trên kích thước di động nhé (chọn icon có hình cái iPhone á).
Ok, chúng ta bắt đầu viết CSS nhé. Trước tiên là import 1 số file quan trọng vào giống như ta làm ở file style.less
1 2 3 | @import '../less_file/grid.less';@import '../less_file/variables.less';@total-width: 100%; |
Nếu bạn có thắc mắc là tại sao mình chèn thêm ../ vào trước mỗi URL là do mình muốn lấy đường dẫn tuyệt đối bởi vì mình đặt file mobile.less trong 1 thư mục css nên mình phải lấy đường dẫn tuyệt đối, sau đó vào lại thư mục less_file.
Tiếp tục là chỉnh lại font size của body vì mình thích size chữ bé hơn xíu khi lên giao diện điện thoại.
1 2 3 | body { font-size: 0.9em;} |
Bạn có thể thấy bây giờ cái .top-bar nhìn nó hơi bựa vì font size hơi lớn và có padding, ta viết lại như sau để nó nhìn cân xứng hơn.
1 2 3 4 | .top-bar { padding: 0 0.3em; line-height: 0.8em;} |
Nhìn nó đỡ hơn một tẹo trên kích thước di động rồi nè
Tiếp tục tới phần #header, ở phần này trên di động thì mình sẽ mang cái tên website ra hiện thị chính giữa, sau đó bên dưới nó là một nút bấm hiển thị menu giống thế này.
Và đây là đoạn CSS cho nó.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | #header { padding-top: 2em; overflow: hidden; .site-title { a { text-align: center; } } //end .site-title .header-menu { a.show-menu { font-weight: bold; display: block; text-align: center; background: #606060; margin: 0 8em 0.3em 8em; padding: 0.6em 0.5em; border-radius: 5px; &:hover { color: #fff; background: darken(#606060, 10%) } } ul { list-style: none; padding: 0 0 0.5em 0; li { background: lighten(red, 10%); margin-bottom: 1em; margin: 1em; padding: 0.5em 1em; a { &:hover { font-weight: bold; color: darken(yellow, 10%)} } } //end .header-menu ul li ul { li:before { content: "»"; padding-right: 0.5em; } } //end sub-menu } //end .header-menu ul }} |
Bây giờ kết quả của chúng ta là như thế này nè
Nhưng mà như mình nói ban đầu, chúng ta sẽ không cho hiển thị thế này đâu vì nếu như bạn có nhiều menu sau này thì sẽ rất mất diện tích. Mình sẽ thêm vào một số đoạn jQuery đơn giản để tạo hiệu ứng hiển thị cái menu khi nhấp chuột vào nút Menu.
Bạn mở file main.js trong thư mục js ra và viết đoạn này vào.
1 2 3 4 5 6 7 | $(document).ready(function() { $('.header-menu > ul') .hide(); $('a.show-menu').click(function() { $('.header-menu > ul').slideToggle(1000); return false; });}); |
Bây giờ hãy lưu lại và kiểm tra, lúc này các menu của bạn sẽ được ẩn đi và chỉ hiển thị ra khi nhấp vào nút Menu.
Tiếp tục là phần .featured-content, ở giao diện mobile thì chúng ta chỉ đơn giản là canh khung cho nó để mỗi .box sẽ hiển thị một hàng, và giảm nhỏ cỡ chữ của tiêu đề bài viết xuống.
1 2 3 4 5 6 7 8 9 | .featured-post { .column(12); margin-top: 0.5em; img { width: 100%; height: 100% } .box { margin-bottom: 0.3em; h2 { font-size: 1.3em } }} |
Kết quả..
Nhìn cũng tạm tạm rồi phải không nào
Ở phần hiển thị danh sách bài mới trong class .content-main thì ở giao diện mobile mình muốn để bài viết hiển thị bao gồm tiêu đề và ảnh thumbnail chứ không gồm mô tả, giống như ảnh này:
Nếu bạn muốn vậy thì ta có đoạn CSS như thế này
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | /*--Content--*/ .content { .column(12); .content-main { .post { .row(12); .border-gray(1px); border-bottom: none; width: 100%; margin: 0; .post-thumbnail { .column(4,12); padding-top: 1.1em; } .post-info { .column(8,12); .post-meta { font-size: 0.9em } .post-exceprt { display: none } } .post-below { display: none; } } //end .post } //end .content-main .sidebar { .column(12); } } |
Giải thích:
- Đầu tiên ta sẽ chia cột cho .content-main thành 12 cột vì chúng ta sẽ cần đưa .content-main và .sidebar sở hữu cùng một chiều rộng giống nhau để khỏi bị tràn ra ngoài khung, cũng không chết chóc ai.
- Sau đó mình tiếp tục chia .post ra 12 cột vì nếu không chia ta không thể chia cột cho .post-thumbnail và .post-info vì .post là thành phần mẹ của nó. Thực tế có thể bỏ .row(12) ở phần .post đi nhưng lúc đó giao diện sẽ tràn đầy ra 2 bên đường biên nên nhìn không thẩm mỹ lắm.
- Tiếp tục mình chia .post-thumbnail được sử dụng 4/12 cột mà ta đã chia cho .post với hàm .column(4,12). Và mình chia cho phần .post-info dùng 8/12 cột. Như vậy tổng 2 phần là 12 cột như ta đã làm với .post.
- Trong đó có 2 phần mình để thuộc tính display: none, mục đích là cho nó ẩn đi với trình duyệt điện thoại vì ở điện thoại hình như mấy cái này ít cần thiết.
Và cuối cùng là ở #footer mình muốn làm thế này
Để làm được như ảnh trên giao diện di động thì nếu so với các CSS ta đã viết cho phần tổng thể rồi thì muốn sửa lại trên giao diện di động cũng không quá rườm rà, cụ thể ta cần:
- Đưa tiêu đề widget ra giữa, chỉnh lại font-size của tiêu đề.
- Sửa font-size của nút Đăng ký.
- Chia .col-3 ra 3 cột nhỏ khác nhau để hiển thị ảnh.
Như vậy ta có…
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | #footer { h4 { text-align: center; font-size: 1.4em } .optin-form { input[type="submit"] { font-size: 1em; } } .col-3 { .row(12); ul { list-style: none; padding: 0; .row(12); li { .column(4,12); } } }} |
Như vậy là chúng ta đã có một giao diện hoàn chỉnh trên điện thoại di động rồi đó, bạn có thể ngắm sơ qua giao diện của mình xem vậy đã chuẩn chưa nhé.
Ở phần tiếp theo, mình sẽ tiếp tục hướng dẫn bạn viết thêm CSS cho giao diện dành cho các thiết bị máy tính bảng nhé vì bây giờ người dùng giàu dã man, toàn dùng máy tính bản lướt web cơ nên việc không tập trung vào nó rất là thiếu sót.
Category: lập trình wordpress, WordPress
0 comments