Máy tính, Lập trình
CSS Truyền thông Queries: mô tả từng bước, tính năng và đánh giá
Ngày xửa ngày xưa, những người ghé thăm trang web để điện thoại thông minh và các thiết bị di động tương tự gây ra những cái khác chỉ cười. Nhiều chỉ đơn giản là không thể hiểu tại sao điều này là cần thiết, vì có như vậy thoải mái máy tính để bàn! Hoặc, lúc tồi tệ nhất, máy tính xách tay. Bên cạnh đó, Internet di động sau đó là tốn kém.
Thời gian trôi qua. Internet đã trở thành rẻ hơn. Việc bán ra ngày càng nhiều điện thoại và máy tính bảng. Một thời gian sau, chủ sở hữu trang web phổ biến lúng túng gãi đầu. Theo thống kê, nó xuất hiện rằng các nguồn lực của họ có nhiều khả năng truy cập điện thoại thông minh của họ hơn so với một máy tính văn phòng phẩm!
Vào thời điểm đó các trang web chưa được tối ưu hóa để xem trên thiết bị di động. Đi đến đời sống cũ trên điện thoại của bạn, bạn sẽ phải bằng lòng với chữ nhỏ, các mục menu nhỏ và các nút không thoải mái.
Sự ra đời của CSS Truyền thông Queries
Có một nhu cầu để áp đặt các nguồn lực để họ nhìn tốt khi nhìn từ bất kỳ màn hình. Đầu tiên truyền bá thực tế của việc thiết lập trang web riêng biệt cho mỗi kích thước. Ví dụ, du khách người sử dụng điện thoại di động, bạn nhận được trên một tài nguyên, và một trong đó là "ngồi" với máy tính của bạn - mặt khác. Nhưng đó là một chặng đường dài, tốn kém và bất tiện.
Sau đó, đến CSS3 Truyền thông truy vấn. Với họ đến khả năng chỉ việc thực hiện các thiết kế năng động.
thiết kế năng động là gì?
Thuật ngữ này được sử dụng nếu sự xuất hiện của tài nguyên thay đổi theo kích thước của màn hình mà nó duyệt. Làm thế nào để hiểu được điều này? Nó đơn giản.
Hãy tưởng tượng rằng bạn có một trang web. Trong phần trên của nó có một menu điều hướng. Ngang. Nó mở rộng trên toàn bộ chiều rộng của trang. Dưới đây là một khối với thông tin liên lạc. Điện thoại và địa chỉ cũng cách nhau bởi hai khối và được sắp xếp theo chiều ngang liền kề với nhau. Dưới khối này - nội dung chính, và ở bên trái hoặc bên phải là thanh bên. Dưới đây, như thường lệ, chân.
Đây "cổ điển" sơ đồ bố trí. Nó là hoàn hảo cho một máy tính cá nhân, nhưng không quá thuận tiện dành cho điện thoại di động. menu ngang là quá rộng. Liên hệ nằm xa nhau. Để sử dụng thông tin từ thanh bên và tất cả sẽ phải di chuyển màn hình, và nó không phải theo sở thích của mọi người.
Vấn đề có thể được giải quyết bằng cách sử dụng một thiết kế thích ứng và điện thoại di động với CSS3 Truyền thông truy vấn. Bằng cách sử dụng các truy vấn phương tiện truyền thông, chúng tôi tái tạo lại vị trí của nội dung ... Bây giờ nó hoạt động như thế này:
- top - đơn vị với menu điều hướng thẳng đứng;
- dưới nó - khối với địa chỉ liên lạc, mà bây giờ cũng được đặt theo chiều dọc;
- nội dung bên không được hiển thị ở phía bên của
nội dung tag, và ở trên nó.
Đây là một ví dụ đơn giản về những gì có thể được thực hiện với thiết kế Responsive Web Media Queries. Trong thực tế rất nhiều khả năng.
Vì vậy, các truy vấn phương tiện truyền thông là gì?
понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Dưới CSS Truyền thông Queries CSS3 hiểu module hạn, mà bạn có thể làm cho nội dung của trang để thích ứng với điều kiện nhất định. Ví dụ, nó bắt đầu để đáp ứng với kích thước màn hình, hoặc thiết bị định hướng (dọc / ngang).
Khi hệ thống hiểu rằng cần phải thay đổi nội dung? Nó sử dụng các truy vấn phương tiện truyền thông. Họ xác định các thông số nhất định. Nếu một thiết bị mà từ đó khách truy cập đến trang web đáp ứng các thông số, bao gồm phong cách trước toa bác sĩ. Họ có thể được viết như một tổng bảng CSS, hoặc trong một file riêng biệt.
CSS Truyền thông truy vấn tương thích trình duyệt
Safari до Chrome. Tất cả các trình duyệt hiện đại hỗ trợ công nghệ này, từ Safari vào Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Tất nhiên, những người sử dụng phiên bản cũ của trình duyệt Internet Explorer có một vấn đề ... nhưng chúng ta hãy đối mặt với nó một cách trung thực - những người vẫn đang sử dụng lớn hơn các trình duyệt IE, chỉ là về bất cứ điều gì có thể gây ra vấn đề.
Cú pháp adaptive bố trí phương tiện Queries
html. Có lẽ bạn đã tiếp xúc với các truy vấn phương tiện truyền thông khi kết nối các tập tin kiểu để html. Ghi dòng đó? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'.
Đây là câu hỏi phương tiện truyền thông! Ông chỉ ra rằng tập tin kiểu định sẽ làm việc trên các thiết bị được trang bị với TV. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Thay vào đó, bạn có thể chỉ in màn hình - trong trường hợp này, phong cách của tập tin được áp dụng, nếu trang được in ra.
Bạn có thể sử dụng các thuộc tính sau:
- – универсальный вариант, используется по молчанию, применяется во всех случаях; tất cả - phiên bản phổ biến, được sử dụng bởi sự im lặng, được áp dụng trong mọi trường hợp;
- – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - màn hình (máy tính, máy tính xách tay, máy tính bảng, điện thoại thông minh, và tất cả những gì được trang bị với một màn hình);
- принтеры; in - Máy in;
- – проекторы; chiếu - máy chiếu;
- – речевые браузеры; trình duyệt ngôn luận - bài phát biểu;
- – для устройств для слабовидящих; chữ nổi - thiết bị cho người khiếm thị;
- – для экранов телевизоров. tv - cho màn hình TV.
Đó là không phải tất cả. , но они используются редко. Có một số thêm CSS Truyền thông truy vấn thuộc tính, nhưng họ hiếm khi được sử dụng. all. Ngoài ra, bạn không chỉ định một tham số - Mặc định trên tất cả.
Cấu trúc của các truy vấn phương tiện truyền thông
css. Thay vì tạo ra một tập tin theo phong cách, bạn có thể sử dụng mã css. Nó trông giống như thế này:
(тут будут стили } màn hình @media và (max-width: 1024px) {( có phong cách}
@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Sau khi chỉ thị @media, mà làm cho nó rõ ràng rằng các truy vấn phương tiện truyền thông được sử dụng, có một dấu hiệu của các loại thiết bị (màn hình - màn hình) và các thông số bổ sung. Max Width. Trong ví dụ này, sử dụng tài sản CSS Truyền thông Queries Max Width. px. Điều này có nghĩa rằng phong cách liệt kê trong niềng răng sẽ được tham gia, nếu người sử dụng kích thước màn hình điện thoại hơn 1024 px. и and не обязательны. Màn hình và và không ràng buộc. Bạn có thể viết này:
@media (max-width: 1024px) {}
Trong trường hợp này, các thuộc tính được sử dụng trên bất kỳ thiết bị, không chỉ những người được trang bị TV.
Quy định cụ thể nhiều tham số
Giả sử bạn muốn giới hạn phạm vi của một vài thiết bị sẽ được sử dụng để lựa chọn phong cách. px, но не больше 500 px. Hãy nói rằng bạn muốn hiển thị các thuộc tính của chỉ những người ghé thăm trang web của bạn từ một điện thoại thông minh, kích thước màn hình không phải là ít hơn 320 px, nhưng không quá 500 px. Trong trường hợp này, yêu cầu có dạng:
@media (min-width: 320px) và (max-width: 500px) {}
and. Nếu bạn đã quen thuộc với lập trình, bạn NJ biết những gì nhà điều hành được áp dụng và. Đối với những người không biết: nó kiểm tra nếu cả hai điều kiện là đúng sự thật. tính E. Kích hoạt trong màn hình truy vấn nên được không ít hơn 320 và không quá 500 pixel.
and не ограничивается одним. Và số lượng các nhà khai thác không giới hạn trong một. Bạn có thể đặt họ càng nhiều như bạn muốn. Ví dụ, hãy cố gắng tạo ra một màn hình kích thước nhất định cho điện thoại thông minh và hoàn toàn khác - cho TV.
Một điểm quan trọng - định hướng của thiết bị người dùng. Có người duyệt trang web trên điện thoại thông minh của bạn theo hướng dọc, một người nào đó - với cảnh quan. orientation:portrait, для вторых, соответственно, orientation:landscape. Đối với trước đây, bạn sẽ cần một định hướng điều kiện thêm: chân dung, cho phần thứ hai, tương ứng, định hướng: phong cảnh. @media. Những dòng này cũng được thể hiện trong ngoặc đơn sau @media đội. and. Bạn có thể chia sẻ chúng qua và.
Một sắc thái thú vị. and вы вполне можете использовать оператор or. Thay vào đó, và bạn cũng có thể sử dụng hoặc vận hành. Ông cần ít nhất một điều kiện trong yêu cầu đến mức khó tin! Ví dụ:
) {} @media (max-width: 500px) hoặc (định hướng: chân dung) {}
px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Nếu màn hình nhỏ hơn 500 px hoặc sử dụng theo chiều dọc, các niềng răng sẽ mất phong cách hiệu quả.
Từ khoá không cho tinh chỉnh
not. Các truy vấn phương tiện truyền thông, bạn có thể chèn chữ không. Này được thực hiện như sau:
@media (không max-width: 700px ) {}
Thuộc tính được kích hoạt nếu chiều rộng tối đa không bằng 700 pixel.
tính năng truyền thông
Các truy vấn có thể được sử dụng một số chức năng được thiết lập sẵn. W3C. Tự làm quen với tất cả các bạn có thể W3C trực tuyến. Hầu hết các lập trình viên đủ để sở hữu ba chính:
- (о нем мы уже говорили); định hướng (chúng tôi đã nói về nó);
- (ширина, ее тоже упоминали); chiều rộng (chiều rộng, nó cũng được đề cập);
- (высота). chiều cao (chiều cao).
Chiều cao hiếm khi được sử dụng, nhưng có một vài trường hợp, trong đó thiết lập này có thể hữu ích.
Làm thế nào và ở đâu để đặt yêu cầu?
Nhiều nhà thiết kế web bằng cách nào đó đặt chúng vào cuối của phong cách tập tin. Ví dụ, người đầu tiên liệt kê các phong cách chính, và sau đó, ở dưới cùng của tài liệu, đặt yêu cầu.
Đây không phải là rất tốt. Nhiều thuận tiện hơn để đặt thuộc tính cho các thiết bị khác nhau ngay sau khi phong cách chính. Ví dụ, bạn có một div, mà thiết lập màu chữ đỏ:
div {
color: red;
}
Ngay sau khi yêu cầu chỉ ra:
@media (min-width: 320px) {}
Quy định về tài sản.
Như một cách tiếp cận sẽ là cồng kềnh nếu bạn đang sử dụng "tinh khiết» css. Để sự trợ giúp của các tiền xử lý. Họ có rất nhiều cơ hội thú vị cho các yêu cầu ứng dụng chính xác hơn.
Một tùy chọn khác - đặt thuộc tính cho các thiết bị khác nhau trong các tập tin theo phong cách khác nhau. Điều này đặc biệt hữu ích nếu bạn sử dụng một chỉ thị tiền xử lý để nhập khẩu. Kết quả là một cách dễ dàng để chỉnh sửa, mã sạch.
Mà Một để sử dụng? Tất cả đều phụ thuộc vào sở thích cá nhân và đặc điểm của đội. Có lẽ, trong nơi làm việc của bạn có một cách nào đó để đặt các truy vấn phương tiện truyền thông sẽ được chấp nhận.
Cũng đừng quên rằng bạn có thể đơn giản hóa cuộc sống của bạn với phần mềm mới nhất. Nó không chỉ là về tiền xử lý. Với Gulp Nhóm CSS Truyền Truy vấn có thể làm cho quá trình dễ dàng hơn nhiều. Đề xuất để làm chủ công cụ này hoặc bất kỳ chất tương tự của nó.
Similar articles
Trending Now