Cách áp dụng CSS cho từng máy tính/mobile [WordPress]

Ngày 2019 tháng 7 năm 10

Giả sử tình huống này

  • Tôi chỉ muốn phản chiếu CSS trên màn hình máy tính/thiết bị di động
  • Tôi đã thay đổi thiết kế bằng CSS bổ sung, nhưng nó bị sập trên điện thoại thông minh
  • Tôi muốn đặt phần đệm và lề phù hợp với các thiết bị như điện thoại thông minh/máy tính bảng/PC
  • Lượng CSS bạn muốn áp dụng không nhiều

方法

Sau "@media screen", hãy chỉ định độ rộng màn hình của thiết bị mà bạn muốn phản ánh bằng "và ( )" và nhập mã CSS vào "{ }".　

  • Chỉ phản ánh PC
màn hình @media và (độ rộng tối thiểu: 980px) { nhập CSS vào đây }　
  • Chỉ phản ánh máy tính bảng
màn hình @media và (độ rộng tối thiểu: 481px) và (độ rộng tối đa: 979px) { nhập CSS vào đây }　
  • Chỉ phản ánh điện thoại di động
màn hình @media và (độ rộng tối đa: 480px) { nhập CSS vào đây }　
  • Chỉ PC và máy tính bảng hoặc chỉ máy tính bảng và thiết bị di động
/* desktop and tablet */ @media screen and (mix-width: 481px){ css here} /* tablet and mobile */ @media screen and (max-width: 980px) { css here }　

「chiều rộng tối đa: 480px" có nghĩa là chiều rộng màn hình làThiết bị lên tới 480 px = 480px trở xuốngđiện thoại thông minh, v.v.

ngược lại"chiều rộng tối thiểu: 980px"Tối thiểu 980 px = 980 px trở lênMáy tính của tôi cảm thấy như chiều rộng màn hình.

  • Chỉ PC và máy tính bảng

Độ rộng màn hình dựa trên những điều sau đây, áp dụng cho hầu hết các thiết bị.

Điện thoại thông minh : 480px trở xuống
タ ブ レ ッ ト : 768~980px
Máy tính cá nhân: 980px trở lên

Tham khảo: chiều rộng màn hình

Ngay cả với điện thoại thông minh, nếu bạn đặt nó sang một bên, nó sẽ vượt quá 480 px.Ngay cả trên máy tính cá nhân, nếu nó chỉ được hiển thị trên một nửa màn hình, nó sẽ có chiều rộng bằng một chiếc máy tính bảng.

Trên iPhone, các hình ảnh sau đây có thể được sử dụng làm tham chiếu cho kích thước màn hình. Trong CSS chiều rộng màn hình làpx (điểm ảnh)Nhưng về phía thiết bịđiểmXin lưu ý rằng nó được thể hiện dưới dạng .

Hình ảnh: Trích từ nguồn trích dẫn The Ultimate Guide To iPhone Resolutions

Ví dụ, iPhone X
điểm: 375 x 812
pixel: 1125 x 2436
Tuy nhiên, chiều rộng được chỉ định bởi CSS là 375.

lập trình