Giấy CSS A4

Chúng tôi đã tạo bảng thông tin đồ họa thông tin / cheat kích thước trang này để nhà thiết kế hoặc khách hàng có thể có được ý tưởng trực quan tức thì về mức độ lớn (hoặc nhỏ) của một kích thước nhất định so với một người. và cũng để mở rộng thông tin đo lường thông thường để bao gồm kích thước pixel ở cả độ phân giải cao (300DPI) và thấp (72DPI)

Tôi cần mô phỏng một tờ giấy A4 trên web và cho phép in trang này khi nó được hiển thị trên trình duyệt (cụ thể là Chrome). Tôi đặt kích thước phần tử thành 21cm x 29. 7cm, nhưng khi tôi gửi để in (hoặc xem trước bản in) thì nó cắt trang của tôi

Xem ví dụ trực tiếp này

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

  

    
Page 1/2
  
  

    
Page 2/2
  

tôi nghĩ rằng tôi đang quên một cái gì đó. Nhưng nó sẽ là gì?

• Trình duyệt Chrome. trang cắt, trang đôi (đó chỉ là những gì tôi cần để nó hoạt động)
• firefox. nó hoạt động hoàn hảo
• IE10. tin hay không, nó hoàn hảo
• Ô-pê-ra. rất lỗi khi xem trước bản in

Các tệp kiểu và mẫu được cung cấp ở đây đã được tạo để đảm bảo rằng các yêu cầu ký quỹ được đáp ứng đầy đủ. Lưu ý rằng mỗi hội nghị có yêu cầu cài đặt trang riêng. Ngay cả khi gần đây bạn đã tải xuống tệp kiểu hoặc mẫu cho hội nghị trước đó, điều này không có nghĩa là nó sẽ đáp ứng các yêu cầu cho hội nghị tiếp theo. Nếu vì lý do nào đó, bạn không thể sử dụng các mẫu hoặc tệp kiểu được cung cấp, vui lòng tuân thủ nghiêm ngặt các cài đặt lề và phông chữ sau đây

thận trọng. Việc không tuân thủ các cài đặt lề và/hoặc phông chữ thích hợp có thể dẫn đến việc loại bỏ bài báo khỏi thủ tục hội nghị mà không có cảnh báo

Tôi đang sử dụng phần mềm pos được phát triển bằng Laravel, nơi tôi muốn chỉnh sửa hóa đơn và thêm hình nền. Hình ảnh được in, nhưng nó không vừa trên giấy. Hình ảnh so với khổ A4. Bây giờ làm cách nào để đặt khổ giấy thành A4 trong trình duyệt?

Bộ mô tả theo quy tắc CSS size, được sử dụng với quy tắc theo quy tắc @page, xác định kích thước và hướng của hộp được sử dụng để thể hiện một trang. Hầu hết thời gian, kích thước này tương ứng với kích thước mục tiêu của trang in nếu có

Kích thước có thể được xác định bằng từ khóa "có thể mở rộng" (trong trường hợp này, trang sẽ lấp đầy các kích thước có sẵn) hoặc với kích thước tuyệt đối

/* Keyword values for scalable size */
size: auto;
size: portrait;
size: landscape;

/*  values */
/* 1 value: height = width */
size: 6in;

/* 2 values: width then height */
size: 4in 6in;

/* Keyword values for absolute size */
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/* Mixing size and orientation */
size: A4 portrait;

  

    
Page 1/2
  
  

    
Page 2/2
  

size = 
  {1,2}                                |
  auto                                         |
  [  || [ portrait | landscape ] ]  

size = 
  {1,2}                                |
  auto                                         |
  [  || [ portrait | landscape ] ]  

size = 
  {1,2}                                |
  auto                                         |
  [  || [ portrait | landscape ] ]