Bạn đang xem : thay đổi kích thước css cho điện thoại di động

Thiết kế web đáp ứ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 kỹ thuật CSS được giới thiệu trong CSS3.

Nó sử dụng quy tắc @ media để bao gồm một khối thuộc tính CSS chỉ khi
điều kiện nhất định là đúng.

Ví dụ

Nếu cửa sổ trình duyệt có kích thước 600px trở xuống, màu nền sẽ là màu xanh lam nhạt:

@media only screen and (max-width: 600px) {
body {

background-color: lightblue;
}
}

Hãy tự mình thử »

Thêm điểm ngắt

Trước đó trong hướng dẫn này, chúng tôi đã tạo một trang web với các hàng và cột, và nó
đã phản hồi nhanh, nhưng nó trông không đẹp trên màn hình nhỏ.

Các truy vấn trên phương tiện truyền thông có thể giúp bạn thực hiện điều đó. Chúng ta có thể thêm một điểm ngắt ở đó
các phần nhất định của thiết kế sẽ hoạt động khác nhau ở mỗi bên của
điểm ngắt.

Máy tính để bàn

Máy tính để bàn

Điện thoại

Điện thoại

Sử dụng truy vấn phương tiện để thêm điểm ngắt ở 768px:

Ví dụ

Khi màn hình (cửa sổ trình duyệt) nhỏ hơn 768px, mỗi cột phải có chiều rộng 100%:

/ * Đối với máy tính để bàn: * /
.col-1 {width: 8.33%;}
.col-2 {width: 16,66%;}
.col-3 {width: 25% ;}
.col-4 {width: 33,33%;}
.col-5 {width: 41,66%;}
.col-6 {width: 50%;}
.col-7 {width: 58,33%;}
.col-8 {width: 66,66%;}
.col-9 {width: 75%;}
.col-10 {width: 83,33%;}
.col-11 {width: 91,66%;}
.col-12 {width:
100%;}

chỉ màn hình @media và (chiều rộng tối đa: 768px) {
/ * Đối với điện thoại di động: * /

[class * = “col-“] {
chiều rộng: 100%;
}
}

Hãy tự mình thử »

Luôn thiết kế cho thiết bị di động đầu tiên

Mobile First 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ị khác (Điều này sẽ giúp 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 là Thiết bị di động trên hết:

Ví dụ

/ * Đối với điện thoại di động: * /
[class * = “col-“] {
width: 100%;
}

@media only screen and ( chiều rộng tối thiểu:
768px) {
/ * Đối với máy tính để bàn: * /
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col -3 {chiều rộng: 25%;}
.col-4 {chiều rộng: 33,33%;}
.col-5 {width: 41,66%;}
.col-6 {width: 50%;}
.col-7 {width: 58,33%;}
.col-8 {width: 66,66%;}
.col-9 {width: 75%;}
.col-10 {width: 83,33%;}
.col-11 { chiều rộng: 91,66%;}
.col-12 {chiều rộng: 100%;}
}

Xem Thêm  Tài liệu csv - pandas 1.4.3 - đọc csv với pandas python

Hãy tự mình thử »

Một điểm dừng khác

Bạn có thể thêm bao nhiêu điểm ngắt tùy thích.

Chúng tôi cũng sẽ chèn một điểm ngắt giữa máy tính bảng và điện thoại di động.

Máy tính để bàn

Máy tính để bàn

Máy tính bảng

Máy tính bảng

Điện thoại

Điện thoại

Chúng tôi thực hiện việc này bằng cách thêm một truy vấn phương tiện khác (ở 600px) và một tập hợp các lớp mới cho các thiết bị lớn hơn 600px
(nhưng nhỏ hơn 768px):

Ví dụ

Lưu ý rằng hai nhóm lớp gần như giống hệt nhau, chỉ
sự khác biệt là tên ( col- col-s- ):

/ * Đối với điện thoại di động: * /
[class * = “col-“] {
width: 100%;
}

@media only screen and ( chiều rộng tối thiểu: 600px) {

/ * Đối với máy tính bảng: * /
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33,33%;}
.col-s-5 {width: 41,66%;}

.col-s-6 {width: 50%;}
.col-s-7 {width: 58,33%;}
.col-s-8 {width: 66,66%;}

.col-s-9 {width: 75%;}
.col-s-10 {width: 83,33%;}
.col-s-11 {width: 91,66%;}

.col-s-12 {width: 100%;}
}

@media only screen and (min-width:
768px) {
/ * Đối với máy tính để bàn: * /
.col-1 {width: 8.33%;}
.col-2 {width: 16,66%;}
.col-3 {width: 25%;}
.col-4 {width: 33,33%;}
.col-5 {width: 41,66%;}
.col-6 {width: 50%;}
.col-7 {width: 58,33%;}
.col-8 {width: 66,66%;}
.col-9 {width: 75%;}
.col-10 {width: 83,33%;}
.col-11 {width: 91,66%;}
.col-12 {chiều rộng: 100%;}
}

Có vẻ kỳ lạ khi chúng ta có hai tập hợp các lớp giống nhau, nhưng nó mang lại cho chúng ta
cơ hội trong HTML, để quyết định điều gì sẽ xảy ra với các cột ở mỗi
điểm ngắt:

Ví dụ HTML

Đối với máy tính để bàn:

Cả phần đầu tiên và phần thứ ba sẽ kéo dài 3 cột, mỗi phần. Phần giữa sẽ kéo dài 6 cột.

Đối với máy tính bảng:

Phần đầu tiên sẽ kéo dài 3 cột, phần thứ hai sẽ kéo dài 9 cột và phần thứ ba sẽ được hiển thị bên dưới hai phần đầu tiên và nó sẽ kéo dài 12 cột:

& lt; div class = “row” & gt;
& lt; div class = “col-3 col-s-3” & gt; … & lt; / div & gt;
& lt; div
class = “col-6 col-s-9” & gt; … & lt; / div & gt;
& lt; div
class = “col-3 col-s-12” & gt; … & lt; / div & gt;
& lt; / div & gt;

Hãy tự mình thử »

Điểm ngắt thiết bị điển hình

Có rất nhiều màn hình và thiết bị có chiều cao và chiều rộng khác nhau, vì vậy thật khó để tạo điểm ngắt chính xác cho từng thiết bị. Để giữ mọi thứ đơn giản, bạn có thể nhắm mục tiêu
năm nhóm:

Xem Thêm  Cách sử dụng bộ chọn jQuery trên thuộc tính dữ liệu tùy chỉnh - thuộc tính tùy chỉnh bộ chọn jquery

Ví dụ

/ *
Thiết bị cực nhỏ (điện thoại, 600px trở xuống) * /
@media only screen and (max-width: 600px)
{…}

/ * Thiết bị nhỏ (máy tính bảng dọc và điện thoại lớn, 600px trở lên)
* /
@media only screen and (min-width: 600px) {…}

/ * Thiết bị trung bình (máy tính bảng ngang, 768px trở lên) * /
@media only screen and (min-width: 768px) {…}

/ * Các thiết bị lớn (máy tính xách tay / máy tính để bàn, 992px trở lên)
* /
@media only screen and (min-width: 992px) {…}

/ * Thiết bị cực lớn (lớn
máy tính xách tay và máy tính để bàn,
1200px trở lên) * /
@media only screen and (min-width: 1200px) {…}

Hãy tự mình thử »

Hướng: Dọc / Ngang

Các truy vấn phương tiện cũng có thể được sử dụng để thay đổi bố cục của một trang tùy thuộc vào
hướng của trình duyệt.

Bạn có thể có một tập hợp các thuộc tính CSS sẽ chỉ
áp dụng khi cửa sổ trình duyệt rộng hơn chiều cao của nó, cái gọi là “Ngang”
định hướng:

Ví dụ

Trang web sẽ có nền màu xanh lam nhạt nếu hướng ở chế độ ngang:

@ media only màn hình và (hướng:
ngang) {
nội dung {

background-color: lightblue;
}
}

Hãy tự mình thử »

Ẩn phần tử bằng truy vấn phương tiện

Một cách sử dụng phổ biến khác của truy vấn phương tiện là ẩn các phần tử trên các kích thước màn hình khác nhau:

Tôi sẽ bị ẩn trên màn ảnh nhỏ.

Ví dụ

/ * Nếu kích thước màn hình rộng từ 600px trở xuống, hãy ẩn phần tử * /
@media
chỉ màn hình và (max-width: 600px) {
div.example {
hiển thị: không có;
}
}

Hãy tự mình thử »

Thay đổi kích thước phông chữ bằng truy vấn phương tiện

Bạn cũng có thể sử dụng các truy vấn phương tiện để thay đổi kích thước phông chữ của một phần tử trên
các kích thước màn hình khác nhau:

Kích thước phông chữ có thể thay đổi.

Ví dụ

/ * Nếu kích thước màn hình là 601px hoặc
khác, đặt kích thước phông chữ của & lt; div & gt; đến 80px * /
màn hình chỉ @media và (chiều rộng tối thiểu:
601px) {
div.example {
font-size: 80px;
}
}

/ * Nếu kích thước màn hình là 600px hoặc
ít hơn,
đặt kích thước phông chữ của & lt; div & gt; đến 30px * /
màn hình chỉ @media và (max-width: 600px) {
div.example {
font-size: 30px;
}
}

Hãy tự mình thử »

Tham chiếu CSS @media

Để có cái nhìn tổng quan đầy đủ về tất cả các loại phương tiện và tính năng / biểu thức, vui lòng xem
quy tắc @media trong tham chiếu CSS của chúng tôi .

Xem Thêm  Đặt giá trị của danh sách thả xuống bằng JavaScript / jQuery - đặt giá trị đã chọn của menu thả xuống trong javascript


Xem thêm những thông tin liên quan đến chủ đề css thay đổi kích thước cho điện thoại di động

Các thuộc tính CSS Flexbox cho Flex item

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-09-24
  • Đánh giá: 4 ⭐ ( 9404 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu các thuộc tính CSS Flexbox cho flex-items giúp xây dựng layout – bố cục cho trang web: align-selft, flex-grow, flex-shrink; flex-basis, flex, order

    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    https://sites.google.com/view/nguyenthithuylien/buy-me-a-coffee

    flexbox css html nguyenthithuylien

Các kích thước responsive phổ biến trong lập trình

  • Tác giả: vioagency.vn
  • Đánh giá: 5 ⭐ ( 4862 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Responsive là phong cách thiết kế website phù hợp với hầu hết các thiết bị, mọi độ phân giải màn hình. Hãy cùng VIO company tìm hiểu về responsive và các kích thước responsive hiện nay nhé.

Thiết kế website responsive với CSS – Menu

  • Tác giả: completejavascript.com
  • Đánh giá: 4 ⭐ ( 4233 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiện nay, mọi người có thể truy cập vào website từ rất nhiều các thiết bị khác nhau: máy tính, máy tính bảng (tablet), điện thoại (smart phone),… Vì vậy, mình sẽ hướng dẫn các bạn thiết kế website responsive với CSS.

Responsive Web Design toàn tập từ A đến Z

  • Tác giả: codetot.net
  • Đánh giá: 3 ⭐ ( 6515 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Responsive Web Design dành cho người bắt đầu, hướng dẫn cơ bản các khái niệm, code mẫu và các gợi ý để sử dụng lập trình web hiệu quả hơn.

Thiết lập Kích thước trong CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 2743 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học CSS này bạn sẽ được tìm hiểu cách sử dụng CSS để thiết kích thước chiều rộng (width) và chiều cao (height) cho các phần tử HTML

Tham số kích thước màn hình cho thiết kế Web-Responsive

  • Tác giả: thenaynhe.com
  • Đánh giá: 5 ⭐ ( 6744 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vì đây là 1 trong hàng trăm tham số đánh giá chất lượng SEO để đạt TOP.

One moment, please…

  • Tác giả: vipcom.vn
  • Đánh giá: 5 ⭐ ( 6473 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php