Trang chủ » Kiến thức » Kiến thức Responsive Web Design

CSS trick trong thiết kế giao diện Responsive Web Design

1. Giá trị %
Trong thiết kế giao diện responsive , người ta thường chú trọng vào % hơn là px
Để hiểu tại sao thì tôi sẽ lấy ví dụ nếu bạn Thiết kế web trên desktop với chuẩn width 1400px thì khi bạn CSS một thành phần nào đó với padding là 20px thì dĩ nhiên 20px là 1 con số nhỏ đối với 1400px, nhưng khi bạn xem lại trên iphone chuẩn width 320px thì con số 20px lúc này khá lớn


CSS trick trong thiết kế giao diện Responsive Web Design

Hình minh hoạ padding sử dụng px và %


CSS trick trong thiết kế giao diện Responsive Web Design


Hình minh hoạ margin sử dụng px và %


CSS trick trong thiết kế giao diện Responsive Web Design


Hình minh hoạ sử dụng % cho font-size




2. Word-break
Code:
*{ word-wrap: break-word}
khá xa lạ , nhưng cũng khá hữu dụng trong 1 số trường hợp , bạn nên biết thêm để khi cần

CSS trick trong thiết kế giao diện Responsive Web Design

Hình minh hoạ sử dụng word-break



3.Overflow:hidden
Quá quen thuôc với những người thường xuyên dùng float để dàn trang


CSS trick trong thiết kế giao diện Responsive Web Design

Hình minh hoạ khi chưa sử dụng overflow:hidden



CSS trick trong thiết kế giao diện Responsive Web Design

Hình minh hoạ sau khi sử dụng overflow:hidden


4.Max Width
Sử dụng Max-width cho phép bạn set chiều rộng tối đa của thành phần đó
Code:
body { width: 800px; margin: 20px auto; max-width: 90% }
Trong ví dụ trên, tôi có Tag body với width: 800px , khi trình duyệt web của bạn có chuẩn là 1400 x 900( width x height) (desktop) thì dĩ nhiên bạn sẽ xem được toàn bộ width của Tag body vì 1400 > 800 , nhưng nếu trình duyệt web của bạn có chuẩn là 320 x 480 (iPhone) thì sao? Do 320 < 800 nên khi đó bạn chỉ nhìn thấy được một phần width của thẻ body trên màn hình trình duyệt

Bạn có thể dễ dàng làm cho Tag body tự động thay đổi kích thước phù hợp với mọi thiết bị bằng cách CSS cho Tag body thuộc tính max-width: 90% (chừa 10% cách đều 2 bên cho đẹp), thì lúc này width lớn nhất của Tag body sẽ tự động lấy giá trị bằng 320 * 90 /100 = 288px (90% width của trình duyệt)

Demo
5.Min width
Code:
input[type="text"] { width: 400px; min-width: 140px; max-width: 40% }
nếu bạn sử dụng max-width với các giá trị nhỏ khoảng 10-50% , khi xem trên desktop thì nó ổn thôi , nhưng khi xem trên iphone width 320px thì lúc này 10% khá là bé , hãy sử dụng min-width nếu bạn muốn

http://www.templatemela.com/demo/MAG090194/

Hình minh hoạ sử dụng min-width




6.Responsive Image

Bạn có thể dễ dàng làm cho hình ảnh tự động thay đổi kích thước phù hợp với mọi thiết bị bằng cách CSS cho Tag img thuộc tính max-width: 100% và height: auto
Code:
img { max-width: 100%; height: auto}
chạy tốt trên IE7 và IE9 , nhưng không chạy trên IE8 . Để fix nó , chỉ cần thêm đoạn code dưới đây để hack IE8

Code:
@media \0screen { img { width: auto; /* for ie 8 */ } }
7.Responsive Video
Cũng như hình ảnh , nếu bạn sử dụng Tag video mới của HTML5, thì việc này rất dễ dàng, bạn chỉ cần CSS max-width:100% cho Tag video (tag video HTML5 chỉ hỗ trợ 3 định dạng .ogg .mp4 .webm)
HTML Code:
<video src="link đến file video" controls="controls"></video>/* ví dụ */<video src="http://tinyvid.tv/file/2oe3ihxeyiyz2.ogg" controls="controls"></video>
Code:
video { max-width: 100%; height: auto }
Đối với các dạng video chèn code sử dụng Tag iframe hoặc object Tag như của youtube hay vimeo , ...
bạn cần phải bọc nó trong 1 thẻ div và CSS cho thẻ div position: relative ; padding-bottom khoảng 50% -60%. Sau đó, CSS các thành phần con của div ( iframe , object) width: 100% , height: 100% , postion: absolute, sẽ hơi khó hiểu với ai chưa rành về postion , nhưng bạn chỉ cần làm theo ví dụ dưới đây và thay đổi các giá trị để trải nghiệm
HTML Code:
<div class="video"><iframe width="800" height="450" src="http://www.youtube.com/embed/6gK16QTHgU4" frameborder="0" allowfullscreen></iframe></div>
Code:
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
(56.25%= height 450 / width 800 * 100)
Bạn phải click vào đây
để like, thì comment face của bạn mới được lên đầu
Để comment nhiều người biết đến
Kiến thức tiếp theo
Kiến thức đọc nhiều

Thiết kế website đáp ứng tốt Responsive Design để SEO Mobile

Theo nhiều dự đoán của các chuyên gia năm 2015 sẽ là năm bùng nổ của các thiết bị di động như mobile phones, tablets, and smartphones. Mục tiêu nhắm đến của các SEOER trong năm 2014 này là tăng truy cập internet bằng các thiết bị di động bằng các hình thức Seo Mobile.

Web responsive tương tác tuyệt vời cho người dùng.

Với sự phát triển ngày một nhanh ngày một nhanh của Công nghệ, người dùng không chỉ trải nghiệm và tìm kiếm thông tin chỉ qua máy tính để bàn ( PC ), mà còn từ máy tính bảng ( tablet ), điện thoại thông minh ( smart phone ), TV 4K..

Vì sao nên áp dụng thiết kế Responsive Web Design

Từ sự phổ biến và phát triển thịnh hành của smartphone và các thiết bị di động, thiết kế web responsive trở thành xu hướng thiết kế web hot nhất hiện nay. Thiết kế web Responsive được coi là cách tiếp cận mới và là giải pháp tuyệt vời nhất cho phép một trang web khi chạy trên các nền di động khác nhau mà vẫn giữ nguyên giao diện ban đầu.

Lợi ích của Responsive Web Design trên thiết bị di động

Để biết được RWD, trước tiên chúng ta hãy cùng tìm hiểu xem người ta làm như thế nào để có được một website hoàn chỉnh với đủ màu sắc, hình ảnh chứ không phải là hàng nghìn dòng chữ khô khan.

Những xu hướng thiết kế website mới đáng lưu ý hiện nay

Mạng toàn cầu và những nội dung trên nó luôn thay đổi liên tục, luôn có những xu hướng và phong cách thiết kế nội dung mới được tạo ra và phát triển mạnh mẽ. Hãy cùng vGing điểm qua những xu hướng thiết kế web đang trở thành hiện tượng gần đây:

Những thuận lợi và thách thức khi thiết kế web Responsive

Responsive Web Design (hay còn gọi "Thiết Kế Web Đáp Ứng") là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính mỹ thuật với độ hiển thị nội dụng co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, với mọi độ phân giải màn hình, duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải.

Xu hướng thiết kế web tương thích mobile sẽ thay đổi tất cả mọi thứ vào năm 2015

Vì thế các xu hướng, công nghệ và kỹ thuật sẽ xác định năm 2015 là gì? tạp chí mạng web đặt ra các vấn đề để phát hiện ra chúng bằng cách yêu cầu 20 nhà thiết kế sáng, các nhà phát triển của web và các nhà sáng tạo.

Bắt đầu thiết website di động với Responsive Web Design và Html 5 Css3

Thiết kế web phải đáp ứng hỗ trợ đa giao diện di động(Responsive Web Design), được xây dựng với các công nghệ HTML5 và CSS3, cho phép một trang web để 'chỉ làm việc "trên nhiều thiết bị và màn hình...

Tăng thứ hạng nhanh cho trang Web Responsive

Lượng truy cập là một trong những yếu tố quan trọng hàng đầu của website. Suy cho cùng, mọi hình thức marketing, quảng cáo đều cùng chung một mục đích là tăng lượng truy cập tới một website. Số lượt truy cập cao đồng nghĩa với việc web của bạn được nhiều người biết tới...

Web Responsive – Giải pháp hiệu quả Marketing Online cho Mobile

Web responsive không đơn thuần là tạo ra sản phẩm đẹp trong mắt người dùng mà còn là công việc tạo ra trải nghiệm mới cho người dùng. Các sản phẩm di dộng thông minh tạo ra một thời kỳ mới cho việc trải nghiệm internet...

Website được thiết kế Responsive sẽ lợi thế cạnh tranh hơn đối thủ trong cuộc đua Top SEO Google

Khi bạn thiết kế một trang web mà phù hợp với tất cả các kích thước của màn hình cả máy tính bàn, máy tính bảng, di động… sẽ nhận được rất nhiều thu hút từ phía người dùng. Bởi website của bạn được mọi người truy cập đến mọi lúc mọi nơi trên mọi thiết bị. Sử dụng thiết kế web responsive là một cách hiệu quả để tối ưu cho tất cả các thiết bị sẽ giúp giành được các ưu thế từ tìm kiếm di động.

Thiết kế giao diện Responsive Web Design

Ngày nay, do sự phát triển chóng mặt của các smartphone và tablet, nên ta cần phải làm sao cho website hiển thị tốt trên mọi thiết bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ. Để đáp ứng được nhu cầu đó hiện tại theo tôi biết thì người ta có 2 cách làm :

Hãy like face để theo dõi bài viết mới
vGing · Giới thiệu · Dịch vụ · Khách hàng · Blog · Kiến thức · Liên hệ