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

Ứng dụng của Responsive Web Design khi thiết kế website phần 2

Những xu hướng thiết kế website mới đáng lưu ý hiện nay | Ứng dụng của Responsive Web Design khi thiết kế website - phần 1

CSS3 hỗ trợ tất cả các loại thiết bị truyền thông tương tự như CSS 2.1 , chẳng hạn như màn hình , in ấn và thiết bị cầm tay , nhưng đã có thêm hàng chục tính năng hỗ trợ phương tiện truyền thông mới , bao gồm cả chiều rộng tối đa , thiết bị rộng , định hướng và màu sắc. Thiết bị mới được thực hiện sau khi phát hành CSS3 ( chẳng hạn như iPad và các thiết bị Android ) chắc chắn sẽ hỗ trợ tính năng truyền thông . Vì vậy,một phương tiện truyền thông truy vấn sử dụng CSS3 sẽ nhắm tới mục tiêu các thiết bị này làm việc tốt , và nó sẽ bị bỏ qua nếu truy cập bằng trình duyệt máy tính cũ không hỗ trợ CSS3.

Thiết kế website" alt="Ứng dụng của Responsive Web Design khi Thiết kế website" />


Trong bài viết của Ethan Marcotte , chúng ta thấy một ví dụ về một truy vấn phương tiện truyền thông :

<linkrel="stylesheet"type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css"/>

Phương tiện truyền thông truy vấn này là khá tự giải thích : nếu trình duyệt hiển thị trang này trên một màn hình (chứ không phải in ấn, vv ) , và nếu chiều rộng của màn hình ( không nhất thiết phải là khung nhìn) là 480 pixel hoặc thấp hơn , sau đó tải shetland . css .

Tính năng mới của CSS3 cũng hỗ trợ Thiết kế web bao gồm định hướng ( chân dung so với cảnh quan ) , thiết bị rộng , min- thiết bị - chiều rộng và nhiều hơn nữa . Nhìn vào "Định hướng truyền thông truy vấn " để biết thêm thông tin về thiết và hạn chế chiều rộng dựa trên các tính năng truy vấn phương tiện truyền thông .

Người ta có thể tạo ra nhiều phong cách , cũng như thay đổi cách bố trí cơ bản được xác định để phù hợp với phạm vi của độ rộng - ngay cả đối với cảnh quan so với chân dung định hướng . Hãy chắc chắn để xem xét các phần của bài viết Ethan Marcotte mang tên " Gặp gỡ các phương tiện truyền thông truy vấn " cho thêm các ví dụ và giải thích kỹ lưỡng hơn .

Các truy vấn nhiều phương tiện truyền thông cũng có thể được giảm xuống đúng vào một phong cách duy nhất, đó là lựa chọn hiệu quả nhất khi được sử dụng :

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

Đoạn mã trên là từ một mẫu miễn phí cho nhiều phương tiện truyền thông truy vấn giữa các thiết bị phổ biến Andy Clark.

Vấn đề về CSS3 media trong Thiết kế web:

Min-width và max-width là thuộc tính cụ thể được yêu cầu trong media.

Lưu ý trong ví dụ dưới đây chúng ta đang sử dụng cú pháp cho các truy vấn phương tiện truyền thông có thể sử dụng tất cả trong một phong cách trang. Như đã đề cập ở trên, cách hiệu quả nhất để sử dụng phương tiện truyền thông truy vấn là đặt tất cả chúng trong một CSS, với phần còn lại của phong cách cho trang web. Bằng cách này, nhiều yêu cầu không cần phải được thực hiện cho nhiều phong cách.

@media screen and (min-width: 600px){
.hereIsMyClass{
width:30%;
float: right;
}
}

Các lớp học quy định trong các meida query trên (hereIsMyClass) sẽ chỉ làm việc nếu trình duyệt hoặc chiều rộng màn hình là trên 600 điểm ảnh. Nói cách khác, phương tiện truyền thông truy vấn này sẽ chỉ chạy nếu chiều rộng tối thiểu là 600 điểm ảnh (do đó, 600 pixels hoặc lớn hơn).

@media screen and (max-width: 600px){
.aClassforSmallScreens{
clear: both;
font-size:1.3em;
}
}

Và bây giờ max-width sẽ chỉ áp dụng cho các trình duyệt có chiều rộng màn hình trên 600px hoặc hẹp hơn.

Đôi khi chúng ta muốn sử dụng một thiết bị chiều rộng đặc biệt:

@media screen and (max-device-width: 480px){
.classForiPhoneDisplay{
font-size:1.2em;
}
}
@media screen and (min-device-width: 768px){
.minimumiPadWidth{
clear: both;
margin-bottom:2px solid #ccc;
}
}

Ngoài ra có thể kết hợp:

@media screen and (min-width: 800px) and (max-width: 1200px){
.classForaMediumScreen{
background:#cc0000;
width:30%;
float: right;
}
}

Xác định media query trong một thẻ liên kết HTML tiêu chuẩn trong Thiết kế web:

<linkrel="stylesheet"media="screen and (max-width: 600px)"href="small.css"/>
<linkrel="stylesheet"media="screen and (min-width: 600px)"href="large.css"/>
<linkrel="stylesheet"media="print"href="print.css"/>

Bài viết liên quan

      Những xu hướng thiết kế website mới đáng lưu ý hiện nay
      Ứng dụng của Responsive Web Design khi thiết kế website - phần 1
Kiến thức tiếp theo
Kiến thức đọc nhiều

Xây dựng website bán hàng tối ưu thiết bị di động là điều rất quan trọng

Hiện nay với sự xuất hiện của rất nhiều các điện thoại thông minh được sản xuất và nó có giá phục vụ nhu cầu của rất nhiều tầng lớp khách hàng. Người dùng truy cập điện thoại thông minh để tìm kiếm những gì họ cần là rất nhiều vì vậy có một trang web đáp ứng điện thoại di động có lẽ là quan trọng nhất, và như vậy đòi hỏi các doanh nghiệp bán hàng trực tuyến là tạo ra một trang website tối ưu di động.

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

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...

So Sánh Thiết Kế Responsive Web Design, Web Mobile, Mobile App. Thiết kế nào ưu điểm nhất?

Khuynh hướng thiết kế một website đáp ứng với các thiết bị di động là điều tất yếu đối với nhu cầu sử dụng của người dùng hiện nay. Responsive Web Design , Web Mobile và Ứng dụng Mobile là 3 thiết kế ứng dụng giúp website hiển thị trên các thiết bị di động. Thiết kế nào nào tốt nhât...

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...

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.

Thiết kế web di động chuyên nghiệp với Responsive Web Design. Xu hướng toàn cầu và cơ hội cho bạn.

Thiết kế web thân thiện với thiết bị di động đang là xu hướng chung toàn cầu khi mà trong một thập kỷ qua, lượng thiết bị di động tăng đột biến. Cũng như lưu lượng duyệt web qua di động đã chiếm đến hơn 60 % lưu lượng duyệt web toàn cầu trong cuối năm 2014 vừa qua. Vậy đâu là giải pháp thiết kế web di động chuyên nghiệp và cơ hội nào cho website của bạn trong kỷ nguyên di động ?

Web 2.0 là gì? Và ý nghĩa của web 2.0

Hiện nay khái niệm web 2.0 đang ngày trở nên phổ biến. Mới nghe thì có vẻ như khái niệm web 2.0 là để chỉ một nền tảng, một công nghệ hoặc một bộ mã nguồn nào đó. Nhưng tất cả đều không phải. Hôm nay, hãy cùng vGing tìm hiểu xem web 2.0 là gì nhé.

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.

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.

Cuộc đột phá của công nghệ thiết kế Web Responsive

Hiện nay, Responsive website không còn là khái niệm xa lạ trên thế giới. Với tốc độ phát triển đáng ngạc nhiên của các thiết bị di động, chắc chắn rằng chỉ trong thời gian ngắn nữa, bạn sẽ thấy các website Việt Nam cũng dần thay đổi theo xu thế này. Đơn giản bởi vì website của chúng ta phải thay đổi phù hợp với xu hướng của người dùng...

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...

Những lợi ích tuyệt vời của Responsive Design trong SEO mobile

Responsive Design đã được đề cập đến rất nhiều trong thời gian gần đây. Thời kỳ Mobile đang là xu hướng của thời đại hiện nay. Khi Mobile được chú trọng, các nền tảng hỗ trợ phát triển phiên bản mobile cực kỳ nhiều.

vGing · Giới thiệu · Dịch vụ · Khách hàng · Blog · Kiến thức · Liên hệ