Home-theater-designers
Nếu bạn muốn phát triển các trang web / ứng dụng web, thì việc biết cách tạo ra các thiết kế đáp ứng là điều cần thiết cho sự thành công của bạn.
Trước đây, việc tạo ra các trang web thích ứng tốt với các kích thước màn hình khác nhau là điều xa xỉ mà chủ sở hữu trang web phải yêu cầu từ nhà phát triển. Tuy nhiên, sự gia tăng sử dụng điện thoại thông minh và máy tính bảng hiện đã khiến thiết kế đáp ứng trở thành một điều cần thiết trong thế giới phát triển phần mềm.
Sử dụng truy vấn phương tiện là cách tốt nhất để đảm bảo rằng trang web / ứng dụng web của bạn xuất hiện chính xác như cách bạn muốn trên mọi thiết bị.
Hiểu thiết kế đáp ứng
Tóm lại, thiết kế đáp ứng liên quan đến việc sử dụng HTML / CSS để tạo bố cục trang web / ứng dụng web thích ứng với các kích thước màn hình khác nhau. Trong HTML / CSS, có một số cách khác nhau để đạt được khả năng đáp ứng trong thiết kế trang web:
- Sử dụng đơn vị rem và em thay vì pixel (px)
- Đặt chế độ xem / tỷ lệ của từng trang web
- Sử dụng truy vấn phương tiện
Truy vấn phương tiện là gì?
Truy vấn phương tiện là một tính năng của CSS đã được phát hành trong phiên bản CSS3. Với sự ra đời của tính năng mới này, người dùng CSS có được khả năng điều chỉnh cách hiển thị của trang web dựa trên chiều cao, chiều rộng và hướng của thiết bị / màn hình (chế độ ngang hoặc dọc).
Đọc thêm: Bảng gian lận thuộc tính CSS3 cơ bản
Truy vấn phương tiện cung cấp một khuôn khổ để tạo mã một lần và sử dụng nó nhiều lần trong suốt chương trình của bạn. Điều này có vẻ không hữu ích lắm nếu bạn đang phát triển một trang web chỉ có ba trang web, nhưng nếu bạn đang làm việc cho một công ty có hàng trăm trang web khác nhau — thì điều này sẽ chứng tỏ là một công cụ tiết kiệm thời gian rất lớn.
Sử dụng truy vấn phương tiện
Có một số điều khác nhau mà bạn cần tính đến khi sử dụng truy vấn phương tiện: cấu trúc, vị trí, phạm vi và liên kết.
Cấu trúc của truy vấn phương tiện
Ví dụ về cấu trúc truy vấn phương tiện
@media only/not media-type and (expression){
/*CSS code*/
}Cấu trúc chung của một truy vấn phương tiện bao gồm:
- Từ khóa @media
- Từ khóa không / duy nhất
- Loại phương tiện (có thể là màn hình, bản in hoặc lời nói)
- Từ khóa và
- Một biểu thức duy nhất được đặt trong dấu ngoặc đơn
- Mã CSS nằm trong một cặp dấu ngoặc nhọn mở và đóng.
Có liên quan: Sử dụng CSS để định dạng tài liệu để in
Ví dụ về Truy vấn Phương tiện Với Từ khoá Duy nhất
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}Ví dụ trên áp dụng kiểu CSS (cụ thể là màu nền xanh lam) cho chỉ màn hình thiết bị có chiều rộng từ 450px trở xuống — về cơ bản là điện thoại thông minh. Từ khóa duy nhất có thể được thay thế bằng từ khóa not và sau đó kiểu CSS trong truy vấn phương tiện ở trên sẽ chỉ áp dụng cho bản in và lời nói.
Tuy nhiên, theo mặc định, khai báo truy vấn phương tiện chung áp dụng cho cả ba loại phương tiện nên không cần chỉ định loại phương tiện trừ khi mục đích là loại trừ một hoặc nhiều trong số chúng.
Ví dụ về truy vấn phương tiện mặc định
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}Vị trí của các truy vấn phương tiện
Truy vấn phương tiện là một thuộc tính CSS; do đó, nó chỉ có thể được sử dụng trong ngôn ngữ tạo kiểu. Có ba cách khác nhau để đưa CSS vào mã của bạn; tuy nhiên, chỉ có hai trong số những phương pháp đó cung cấp một cách thực tế để đưa các truy vấn phương tiện vào chương trình của bạn — CSS bên trong hoặc bên ngoài.
Phương pháp nội bộ bao gồm thêm thẻ vào thẻ của tệp HTML và tạo truy vấn phương tiện trong các tham số của thẻ.
Phương pháp bên ngoài bao gồm việc tạo truy vấn phương tiện trong tệp CSS bên ngoài và liên kết nó với tệp HTML của bạn thông qua thẻ.
Phạm vi truy vấn phương tiện
Cho dù truy vấn phương tiện được sử dụng thông qua CSS bên trong hay bên ngoài, có một khía cạnh chính của ngôn ngữ tạo kiểu có thể ảnh hưởng xấu đến cách hoạt động của truy vấn phương tiện. CSS có quy tắc thứ tự ưu tiên. Khi sử dụng bộ chọn CSS hoặc trong trường hợp này là truy vấn phương tiện, mỗi truy vấn phương tiện mới được thêm vào tệp CSS sẽ ghi đè (hoặc được ưu tiên hơn) truy vấn trước đó.
Mã truy vấn phương tiện mặc định mà chúng tôi có ở trên nhắm mục tiêu đến điện thoại thông minh (rộng từ 450px trở xuống), vì vậy nếu bạn muốn đặt nền khác cho máy tính bảng, bạn có thể nghĩ rằng bạn có thể chỉ cần thêm mã sau vào tệp CSS có sẵn của mình.
Ví dụ về truy vấn phương tiện máy tính bảng
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
Vấn đề duy nhất là, do thứ tự ưu tiên, máy tính bảng sẽ có màu nền đỏ và điện thoại thông minh bây giờ cũng sẽ có màu nền đỏ vì 450px trở xuống là dưới 800px.
Một cách để giải quyết vấn đề nhỏ này là thêm truy vấn phương tiện cho máy tính bảng trước truy vấn cho điện thoại thông minh; cái sau sẽ ghi đè cái trước và bây giờ bạn sẽ có điện thoại thông minh có màu nền xanh lam và máy tính bảng có màu nền đỏ.
Tuy nhiên, có một cách tốt hơn để đạt được kiểu dáng riêng biệt cho điện thoại thông minh và máy tính bảng mà không cần quan tâm đến thứ tự ưu tiên. Đây là một tính năng của truy vấn phương tiện được gọi là đặc tả phạm vi, nơi nhà phát triển có thể tạo truy vấn phương tiện với chiều rộng tối đa và tối thiểu (phạm vi).
Ví dụ về truy vấn phương tiện trên máy tính bảng
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
Với ví dụ ở trên, vị trí của các truy vấn phương tiện trong biểu định kiểu trở nên không liên quan vì thiết kế cho máy tính bảng và điện thoại thông minh nhắm mục tiêu đến hai bộ sưu tập chiều rộng riêng biệt.
Liên kết Truy vấn Phương tiện
Nếu bạn không muốn nhúng các truy vấn phương tiện vào mã CSS của mình, có một phương pháp thay thế mà bạn có thể sử dụng. Phương pháp này liên quan đến việc sử dụng các truy vấn phương tiện trong thẻ của tệp HTML, vì vậy thay vì có một biểu định kiểu lớn chứa các tùy chọn tạo kiểu cho điện thoại thông minh, máy tính bảng và máy tính — bạn có thể sử dụng ba tệp CSS riêng biệt và tạo các truy vấn phương tiện của mình trong thẻ.
Thẻ là một phần tử HTML được sử dụng để nhập kiểu CSS từ một biểu định kiểu bên ngoài. Thẻ này có thuộc tính phương tiện hoạt động giống như truy vấn phương tiện trong CSS.
Sử dụng truy vấn phương tiện trong ví dụ về thẻ liên kết
href='tablet.css'>
Đoạn mã trên phải được đặt trong thẻ của tệp HTML của bạn. Bây giờ, tất cả những gì bạn cần làm là tạo ba tệp CSS riêng biệt với tên tệp main.css, tablet.css và smartphone.css — sau đó tạo thiết kế cụ thể mà bạn muốn cho từng thiết bị.
Kiểu trong tệp chính sẽ áp dụng cho tất cả các màn hình có chiều rộng lớn hơn 800px, kiểu trong tệp máy tính bảng sẽ áp dụng cho tất cả các màn hình có chiều rộng từ 450px đến 801px và kiểu trong tệp trên điện thoại thông minh sẽ áp dụng cho tất cả các màn hình bên dưới 451px.
cách tìm lịch sử của tài sản trực tuyến
Bây giờ bạn có các công cụ để tạo các thiết kế đáp ứng
Nếu bạn đã làm đến cuối bài viết này, bạn đã có thể tìm hiểu thiết kế đáp ứng là gì và tại sao nó lại hữu ích. Giờ đây, bạn có thể xác định và sử dụng các truy vấn phương tiện trong các tệp CSS và HTML. Ngoài ra, bạn đã được giới thiệu về thứ tự ưu tiên trong CSS và xem nó có thể ảnh hưởng như thế nào đến cách các truy vấn phương tiện của bạn hoạt động.
Tín dụng hình ảnh: Không gian âm / Pexels
Đăng lại Đăng lại tiếng riu ríu E-mail Cách đặt hình nền trong CSSCSS là một công cụ mạnh mẽ để tạo kiểu cho các trang web. Học cách đặt hình nền sẽ dạy cho bạn rất nhiều kiến thức cơ bản về CSS.
Đọc tiếp Chủ đề liên quan- Lập trình
- Phát triển web
- Thiết kế web
- CSS
Kadeisha Kean là Nhà phát triển Phần mềm Full-Stack và Người viết Kỹ thuật / Công nghệ. Cô ấy có khả năng khác biệt để đơn giản hóa một số khái niệm công nghệ phức tạp nhất; sản xuất vật liệu có thể dễ dàng hiểu được bởi bất kỳ người mới làm quen với công nghệ. Cô ấy đam mê viết lách, phát triển phần mềm thú vị và đi du lịch thế giới (thông qua phim tài liệu).
Xem thêm từ Kadeisha KeanTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký