Quy mô tất cả trang web trong giao diện người dùng ngữ nghĩa

Question

Tôi có trang web ui ngữ nghĩa mà tôi cần phải thu nhỏ, tất cả dường như quá phóng to. Tôi muốn mọi thứ có kích thước nhỏ hơn, từ phông chữ đến vùng chứa và phân đoạn.

Tôi đã thử một số phương pháp tiếp cận css như zoom: 80%; nhưng điều này không hoạt động trên firefox, mặc dù nó chính xác là những gì tôi đang tìm kiếm khi thử nghiệm trong google chrome.

sau đó tôi cố gắng sử dụng chuyển đổi quy mô:

html { 
    -webkit-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    transform: scale(0.8); 
} 

Vấn đề với phương pháp này là các header và footer được cho là có 100% chiều rộng không còn làm.

Có cách nào để thực hiện điều này không? Tôi đã sử dụng site.variables để thay đổi màu sắc của một số biến màu được xác định trước, nhưng tôi không biết liệu tôi có thể thay đổi kích thước mặc định cho mọi thứ hay không, giảm px hoặc em cho mọi phần tử theo tỷ lệ.

Có cách CSS hoặc Semantic UI để thực hiện việc này không?

UPDATE:
Như một ví dụ, khi mở trang web với độ phân giải của tôi, phân khúc có được chiều rộng 1135px, áp dụng bởi một css phương tiện truyền thông khi có độ phân giải cao hơn 1200px. Tôi muốn chiều rộng này hoặc chỉ được áp dụng cho các độ phân giải trên 1300 hoặc 1400px hoặc thay vào đó có chiều rộng của các phân đoạn là 1000px với độ phân giải 1200px. Tuy nhiên tôi sẽ thích điều này để được thiết lập cho tất cả các thành phần một cách tiêu chuẩn, thay vì cần phải viết css tùy chỉnh cho tất cả các yếu tố để ghi đè lên hành vi mặc định.

Đây là phong cách hiện đang được áp dụng cho từng container:

@media only screen and (min-width: 1200px) 
.ui.container { 
    width: 1135px; 
    margin-left: auto !important; 
    margin-right: auto !important; 
} 

Có cách nào tốt hơn để làm điều này, thay vì overruling mọi phong cách kích thước liên quan, cho tất cả các thông số kỹ thuật chiều rộng? Tôi thấy trang web quá lớn khi tôi mở trang đó trong màn hình có chiều rộng gần nhưng trên 1200.

Answer 1

Tôi đã tìm thấy giải pháp cho điều này, vì vậy tôi đang chia sẻ nó với khán giả, trong trường hợp người khác tình cờ gặp vấn đề này.

Tôi không muốn chỉ đơn giản là ghi đè lên các quy tắc CSS vì điều đó dường như rất khó khăn để chờ đợi, vì vậy tôi muốn có nó thực hiện theo một cách ui ngữ nghĩa tiêu chuẩn.

tôi đã kết thúc thay đổi src/trang web/các yếu tố/container.variables, và thay đổi độ rộng mặc định của màn hình lớn, mà mặc định để 1200px:

@largeMonitorBreakpoint:1000px;

Bằng cách này tôi đảm bảo rằng các breakpoint cho màn hình lớn là 1000px thay vì 1200px và do đó chiều rộng của vùng chứa dựa trên giá trị này, do đó, mỗi vùng chứa sẽ mất đến 935px.

Answer 2

Tôi nghĩ giao diện người dùng ngữ nghĩa sử dụng kích thước tương đối cho tất cả các yếu tố để thiết lập kích thước phông chữ như thế này.

html, body { 
    font-size: 14px; 
} 

giá trị mặc định là chủ yếu 16px

Answer 3

UI Semantic sử dụng Gulp để biên dịch CSS và Javascript để sử dụng trong dự án của bạn. Bạn cần thay đổi kích thước phông chữ cơ sở để làm cho các thành phần của bạn nhỏ hơn. Vấn đề là, bạn cần ghi đè giá trị này trước khi biên dịch. Tôi sợ rằng đó là lý do tại sao các giải pháp của Barry127 sẽ không hoạt động như mong đợi, vì kích thước cho một số thành phần đã được tính toán vào thời điểm này.

Thay đổi kích thước cơ sở trong {theme}/globals/site.variables:

/*------------------- 
     Base Sizes 
--------------------*/ 

/* This is the single variable that controls them all */ 
@emSize : 14px; 

/* The size of page text */ 
@fontSize : 14px; 

Bây giờ biên dịch tất cả mọi thứ bằng cách chạy gulp build. Nếu bạn không muốn sử dụng các công cụ xây dựng được giao với Giao diện người dùng ngữ nghĩa, hãy sử dụng các hàm gulp của riêng bạn (tùy chỉnh). Đọc thêm về theming here.

Không bao giờ lên hoặc xuống toàn bộ tài liệu, đây không phải là một phương pháp hay. Hiện vẫn có các trình duyệt không hỗ trợ thuộc tính transform. Ngoài ra, điều này có thể khiến văn bản và đường viền xuất hiện mờ.