Tôi muốn thiết kế đáp ứng cho trang web của mình. Tôi nhầm lẫn về việc thêm @media và @import trong CSS.Định nghĩa "viewport" trên CSS là gì?
Định nghĩa về "chế độ xem" trong CSS là gì? Làm cách nào để đo lường quan điểm của điện thoại thông minh và iPad hoặc iPhone?
viewport là khu vực trình duyệt có thể nhìn thấy người sử dụng hoặc bạn có thể nói cửa sổ có thể nhìn thấy người dùng của khung nhìn của bạn.
Nếu bạn muốn nhắm mục tiêu truy vấn phương tiện, hãy đi qua mydevice.io. Đối với điện thoại di động và bảng sử dụng chiều rộng thiết bị để ghi truy vấn phương tiện.
Nhưng tôi sẽ thích sử dụng ghi truy vấn phương tiện bằng cách sử dụng chiều rộng tối thiểu hoặc chiều rộng tối đa. Sử dụng điểm ngắt.
@import là để import css
@media là viết các truy vấn phương tiện truyền thông không chỉ đối với phản ứng nhanh nhưng bạn có thể viết các truy vấn phương tiện truyền thông in ấn và nhiều hơn nữa
Nếu bạn sử dụng Chrome u có thể:
click chuột phải -> kiểm tra -> và chuyển sang chế độ thiết bị (Ctrl + Shift + M)
Hoặc bấm F12.
Sau đó, chiều rộng và chiều cao sẽ được hiển thị, bạn cũng có thể thay đổi những gì bạn muốn xem dưới dạng.
Trang web này có thông tin tốt. http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Tôi đã đọc trong sách tốt hơn để thiết kế cho thiết bị di động và sau đó thay đổi nếu người dùng máy tính để bàn truy cập vào trang web của bạn. Tôi nghĩ rằng nó tải nhanh hơn theo cách đó.
LƯU Ý
Tôi không thể bình luận nếu không tôi sẽ làm điều đó.
Có lẽ tốt hơn để thiết kế tập trung vào người dùng trang web, trái ngược với thiết bị di động hoặc máy tính để bàn. Nếu phần lớn khách truy cập đang sử dụng trình duyệt trên máy tính để bàn, tại sao bạn nên sử dụng thiết bị di động trước? Chỉ là một gợi ý. –
Tôi sẽ theo dõi những gì tôi đọc trong sách hoặc các trang web tốt như thế này http://www.w3schools.com/css/css_rwd_mediaqueries.asp.Thiết kế dành cho thiết bị di động Đầu tiên Thiết bị di động Đầu tiên có nghĩa là thiết kế cho thiết bị di động trước khi thiết kế cho máy tính để bàn hoặc bất kỳ thiết bị nào khác (Điều này sẽ làm cho trang hiển thị nhanh hơn trên các thiết bị nhỏ hơn). Điều này có nghĩa là chúng tôi phải thực hiện một số thay đổi trong CSS của mình. Thay vì thay đổi kiểu khi chiều rộng nhỏ hơn 768px, chúng ta nên thay đổi thiết kế khi chiều rộng lớn hơn 768px. Điều này sẽ làm cho thiết kế của chúng tôi Di động đầu tiên: –
Đây là giải thích chi tiết về những gì bạn muốn biết. The Viewport
Nếu bạn đang sử dụng chrome sau đó làm theo các bước sau để có được sự quan sát của bất kỳ thiết bị
Nhấn F12> sau đó bấm vào chế độ thiết bị chuyển đổi (nó ở góc trên bên phải của cửa sổ sẽ xuất hiện sau nhấn F12)> từ trình đơn thả xuống, chọn thiết bị mong muốn thì bạn có thể có được chiều rộng và chiều cao
Đọc bài viết này https://developer.mozilla.org/ en-US/docs/Mozilla/Mobile/Viewport_meta_tag – dippas
Định nghĩa có thể được tìm thấy [ở đây] (https://www.w3.org/TR/CSS21/visuren.html#viewport), nhưng dựa trên phần giới thiệu của bạn, tôi rất nghi ngờ đó không phải là câu trả lời bạn * thực sự * đang tìm kiếm. Nếu bạn gặp vấn đề cụ thể với CSS, hãy đăng mã của bạn và mô tả sự cố của bạn. – BoltClock