Chiều rộng CSS toàn màn hình

Tôi đã đánh dấu một tweet cách đây vài tháng, vì đó là một thủ thuật CSS chân chính và đó là thứ chúng tôi yêu thích ở đây

Vấn đề là. làm cách nào để chúng tôi tạo vùng chứa có chiều rộng đầy đủ của trình duyệt khi chúng tôi ở bên trong cha mẹ có chiều rộng giới hạn?

Điểm khởi đầu

Hình ảnh này rộng 100% vì nó là hình ảnh gốc có chiều rộng giới hạn

Chúng tôi muốn kéo dài nó rộng chính xác bằng cửa sổ trình duyệt

Đây là một số đánh dấu giả định tối thiểu

  
Stuff.

  
  

    
    

  

cân nhắc

Nếu chúng tôi có thể sử dụng định vị tuyệt đối, chúng tôi có thể đặt vùng chứa ở vị trí

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

6 và

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

7 – nhưng chúng tôi không thể, vì chúng tôi muốn vùng chứa tiếp tục lưu chuyển

Chúng ta không thể áp dụng một số lề âm cho mỗi bên và kéo nó ra ngoài sao?

Với % chiều rộng đã biết

Giả sử vùng chứa chính rộng 60% và được căn giữa. Điều đó có nghĩa là có 20% chiều rộng ở hai bên của nó. Nhưng lề được tính dựa trên phần tử gốc, do đó, để kéo nó sang 20% ​​bên trái của cửa sổ trình duyệt, bạn cần 1/3 chiều rộng của phần tử gốc, vì vậy…

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

Với chiều rộng cha mẹ không phải% đã biết

Trong hầu hết các trường hợp khác, chúng tôi không có đủ thông tin để biết chính xác khoảng cách để kéo vùng chứa có chiều rộng đầy đủ ra ngoài với lợi nhuận âm

Chà, trừ khi…

Chúng tôi có thể sử dụng chiều rộng của cửa sổ trình duyệt trong toán học CSS của chúng tôi. Số tiền mà chúng tôi muốn “kéo” sang trái và phải là một nửa chiều rộng của cửa sổ trình duyệt cộng với một nửa chiều rộng của cửa sổ chính. (Giả sử cha mẹ là trung tâm. )

Vì vậy, cha mẹ của chúng ta rộng 500px

.full-width {
  margin-left: calc(-100vw / 2 + 500px / 2);
  margin-right: calc(-100vw / 2 + 500px / 2);
}

Một chiều rộng cố định như thế có cảm giác hơi đỏ (tôi. e. điều gì xảy ra trên màn hình hẹp hơn?), tất cả điều này có thể sẽ được gói gọn trong truy vấn phương tiện khiến nó chỉ áp dụng trên màn hình lớn hơn

@media (min-width: 500px) {
  main {
    width: 500px;
    margin: 0 auto;
  }
  .full-width {
    margin-left: calc(-100vw / 2 + 500px / 2);
    margin-right: calc(-100vw / 2 + 500px / 2);
  }
}

Vì bản demo của chúng tôi là một hình ảnh, bạn cũng có thể làm điều gì đó như

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

0 để có được phạm vi bảo hiểm đầy đủ đó

Nếu nó ít uốn não hơn, bạn có thể gặp may khi giảm xuống

@media (min-width: $max-width) {
  .full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

Dịch

Vì hoạt ảnh (có thể) không liên quan ở đây, nên có lẽ không quá cần thiết, nhưng thay vào đó, bạn có thể kéo vùng chứa trở lại cạnh bằng các biến đổi

@media (min-width: 40em) {
  .full-width {
    width: 100vw;
    transform: translateX(calc((40em - 100vw)/2));
  }
}

@support()

Ý tưởng trên được lấy từ Pen của Brandon Mathis nơi anh ấy kết hợp ý tưởng đó với việc gói gọn tất cả trong

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

1

________số 8

Ý tưởng ở đây là không điều nào trong số này áp dụng được nếu trình duyệt không hỗ trợ các đơn vị khung nhìn. Bằng cách đó, bạn có thể kéo hành vi dự phòng lên trên hành vi này trong CSS và để hành vi này ghi đè lên hành vi đó nếu có thể

Có vẻ là một ý tưởng hay, nhưng trong thử nghiệm của tôi, chỉ có Firefox làm đúng. Chrome đôi khi sẽ áp dụng truy vấn phương tiện không chính xác khi không được phép (ảnh chụp màn hình). (Tôi nói “đôi khi” vì có vẻ như việc vẽ lại sẽ “sửa chữa” nó, chỉ để không áp dụng truy vấn phương tiện theo hướng khác. ) Edge dường như cũng không áp dụng các quy tắc truy vấn phương tiện (ảnh chụp màn hình). Có thể các quy tắc @ lồng nhau có một chút lỗi

Không cần calc()

Sven Wolfermann đã tiếp nối ý tưởng của Jon Neal với một biến thể thông minh không cần calc()

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Ý tưởng ở đây là. đẩy vùng chứa đến chính giữa cửa sổ trình duyệt bằng

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

2, sau đó kéo nó trở lại cạnh trái với lề

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

3 âm

Rất thông minh. Bằng cách này, bạn hoàn toàn không cần bất kỳ thông tin nào về chiều rộng gốc. Xin lưu ý rằng cả phiên bản này và phiên bản

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

4 đều yêu cầu phụ huynh phải căn giữa chính xác trong trình duyệt

Bạn thậm chí có thể nghĩ. tại sao phải bận tâm với

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

5 và

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

6?

Tôi sẽ đặt một nhánh của phương pháp này ở đây, vì nó có vẻ hữu ích nhất

Xem hình ảnh chiều rộng khung nhìn đầy đủ của Bút (vùng chứa) bên trong bài viết của Chris Coyier (@chriscoyier) trên CodePen