Trung tâm cá nhân
sách gpt4 ăn đã đi

Làm cho biểu mẫu phản hồi khi ở giữa màn hình ở kích thước màn hình att (làm cho biểu mẫu phản hồi khi kích thước màn hình ở giữa màn hình)

In lại Tác giả: trợ lý lỗi Thời gian cập nhật: 25-10-2023 14:48:15 27 4
mua khóa gpt4 giày nike



Tôi đang cố gắng để các biểu mẫu của mình nằm ở giữa màn hình và tỷ lệ theo kích thước của phần giữa trang web của tôi. Hiện tại, đối với hầu hết các kích thước thì ổn nhưng khi màn hình nhỏ lại, biểu mẫu sẽ chồng lên phần thanh điều hướng và phần chân trang của tôi vì kích thước biểu mẫu của tôi không thay đổi. Đây là ví dụ về một trong các biểu mẫu của tôi với kiểu dáng thanh điều hướng, thân và chân trang. Về cơ bản, tất cả chúng đều giống nhau về kiểu dáng.
HTML

Tôi đang cố gắng đặt bảng của mình ở giữa màn hình và chia tỷ lệ dựa trên kích thước của phần giữa trang web của tôi. Bây giờ, đối với hầu hết các kích thước, điều này là ổn, nhưng khi màn hình nhỏ hơn, biểu mẫu sẽ chồng lên phần thanh điều hướng và phần chân trang của tôi vì kích thước biểu mẫu của tôi không thay đổi. Đây là ví dụ về một trong các biểu mẫu của tôi với các kiểu điều hướng, nội dung và chân trang. Phần lớn, chúng giống nhau về kiểu dáng. ngôn ngữ đánh dấu siêu văn bản




.tiêu đề {
    hiển thị: flex;
    justify-content: khoảng cách giữa;
    căn chỉnh các mục: ở giữa;
    vị trí: cố định;
    chiều rộng: 100%;
    chiều cao: 70px;
    đệm: 0 20px;
    màu nền: trắng;
    trên cùng: 0;
    trái: 0;
}
.topnav{
    chiều rộng: 100%;
    chiều cao: calc(100vh / 10);
    màu nền: #2B78E4;
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
    tràn: ẩn;
    /*justify-content: khoảng cách giữa;*/
}
.topnav a{
    trang trí văn bản: không có;
    màu sắc: đen;
    font-family: "Helvetica", không có chân;
}
.dropbtn {
    màu nền: #fff1f1;
    màu sắc: Đen;
    đệm: 8px 16px;
}
.thả xuống {
    vị trí: tương đối;
    hiển thị: khối nội tuyến;
    đệm: 8px 16px;
    font-style: kế thừa;
}
.dropdown-nội dung {
    hiển thị: không có;
    vị trí: tuyệt đối;
    màu nền: #f1f1f1;
    chiều rộng tối thiểu: 160px;
    hộp bóng: 0px 8px 16px 0px rgba(0,0,0,0.2);
    chỉ số z: 1;
}
.dropdown-nội dung a {
    màu sắc: đen;
    đệm: 12px 16px;
    trang trí văn bản: không có;
    hiển thị: khối;
}
.dropdown-content a:hover {
    màu nền: #ddd;
}
.dropdown:hover .dropdown-content {
    hiển thị: khối;
}
.dropdown: di chuột .dropbtn {
    màu nền: #f6f6f6;
}
.nav-nút{
    màu nền: #fff1f1;
    màu sắc: Đen;
    đệm: 8px 16px;
}
#đăng nhập-btn{
    vị trí: tương đối;
    hiển thị: khối nội tuyến;
    margin-left: tự động;
}
#đăng-ký-nút{
    vị trí: tương đối;
    hiển thị: khối nội tuyến;
    float: phải;
    đệm bên trái: 20px;
}
#nút-đăng-cập, #nút-đăng-ký {
    float: phải;
}
#nhóm-nav{
    vị trí: tương đối;
    đệm bên trái: 20px;
}
thân hình {
    hiển thị: flex;
    flex-direction: cột;
    chiều cao tối thiểu: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", không có chân;
    màu nền: #666666;
}
chân trang {
    màu nền: #999999;
    kích thước nền: 50px;
    chiều cao : tính toán (100vh/8);
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
    justify-content: khoảng cách giữa;
    lề trên cùng: tự động;
    tràn: ẩn;
}
.footer-links {
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
}
.footer-links một {
    lề trái: 20px;
}
#đăng ký-tiêu-đề-khởi-xuất{
     lề dưới: 10px;
 }
#đăng ký-tiêu đề-khởi tạo h2 {
    cỡ chữ: 24px;
    font-weight: đậm;
    căn chỉnh văn bản: ở giữa;
    tràn-bọc: ngắt-từ;
}

#đăng ký-khởi tạo-thân-h1 {
    cỡ chữ: 16px;
    font-weight: đậm;
    căn chỉnh văn bản: ở giữa;
}

#đăng ký-cơ-thể-init p {
    cỡ chữ: 16px;
    căn chỉnh văn bản: ở giữa;
}

#đăng ký-footer-init p {
    cỡ chữ: 14px;
    căn chỉnh văn bản: ở giữa;
}
#đăng ký-footer-init{
    viền trên cùng: 1px rắn;
}
.lối vào{
    chiều rộng: 100%;
}
#signup-footer-init a {
    cỡ chữ: 14px;
    căn chỉnh văn bản: ở giữa;
}
.popup-đăng ký-khởi tạo {
    viền: 2px màu đen đặc;
    đệm: 10px;
    chiều rộng: 45%;
    chiều rộng tối đa: 400px;
    màu nền: #999;
    bán kính đường viền: 5px;
    vị trí: tuyệt đối;
    trên cùng: 50%;
    bên trái: 50%;
    biến đổi: dịch chuyển (-50%, -50%);
    khả năng hiển thị: có thể nhìn thấy;

}
.terms-container {
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
}

.gửi lại-container {
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
}
#liên-kết-thuật-thuật
    color:blue;
}
#điều khoản{
    lề phải: 5px;
}
#termsLỗi{
    hiển thị: không có;
    màu sắc: đỏ;
}



<đầu>
    
    
    Đăng ký
    

    



    


    
    

        Liên hệ với chúng tôi
        Điều khoản sử dụng






cho đến nay tôi đã thử chơi với thiết lập vị trí nhưng bất kỳ thứ gì khác ngoài tuyệt đối đều di chuyển biểu mẫu lên và chồng lên thanh điều hướng và ra ngoài màn hình xem. Tôi đã thử điều chỉnh chiều cao và chiều rộng của div mà biểu mẫu nằm trong và điều đó ảnh hưởng đến vùng chứa biểu mẫu nhưng không ảnh hưởng đến các đầu vào và nhãn trong biểu mẫu đó.

Cho đến nay tôi đã thử sử dụng cài đặt vị trí, nhưng bất kỳ điều gì khác ngoài cài đặt tuyệt đối sẽ di chuyển biểu mẫu lên và chồng lên thanh điều hướng và bên ngoài màn hình xem. Tôi đã thử điều chỉnh chiều cao và chiều rộng của div trong biểu mẫu, điều này ảnh hưởng đến vùng chứa biểu mẫu chứ không ảnh hưởng đến đầu vào và nhãn trong biểu mẫu đó.


Thêm câu trả lời
Khuyến nghị câu trả lời tuyệt vời

Bạn có thể giải quyết vấn đề này thông qua các truy vấn phương tiện, như

Bạn có thể giải quyết vấn đề này bằng các truy vấn phương tiện như


@media chỉ màn hình và (chiều rộng tối đa: 700px) {
    .popup-đăng ký-khởi tạo {
        chiều rộng: 20%;
    }
}

Đã thử nghiệm những điều trên và nó gần như hoàn hảo, bạn sẽ cần tìm ra ranh giới chính xác cho truy vấn phương tiện cụ thể này, nhưng ý tưởng chính là con đường bạn cần thực hiện để giải quyết vấn đề này.

Đã thử nghiệm ở trên và nó gần như hoàn hảo, bạn sẽ cần tìm ra giới hạn chính xác của truy vấn phương tiện cụ thể này, nhưng ý tưởng phải là con đường bạn cần đi qua để giải quyết vấn đề này.




.tiêu đề {
    hiển thị: flex;
    justify-content: khoảng cách giữa;
    căn chỉnh các mục: ở giữa;
    vị trí: cố định;
    chiều rộng: 100%;
    chiều cao: 70px;
    đệm: 0 20px;
    màu nền: trắng;
    trên cùng: 0;
    trái: 0;
}
.topnav{
    chiều rộng: 100%;
    chiều cao: calc(100vh / 10);
    màu nền: #2B78E4;
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
    tràn: ẩn;
    /*justify-content: khoảng cách giữa;*/
}
.topnav a{
    trang trí văn bản: không có;
    màu sắc: đen;
    font-family: "Helvetica", không có chân;
}
.dropbtn {
    màu nền: #fff1f1;
    màu sắc: Đen;
    đệm: 8px 16px;
}
.thả xuống {
    vị trí: tương đối;
    hiển thị: khối nội tuyến;
    đệm: 8px 16px;
    font-style: kế thừa;
}
.dropdown-nội dung {
    hiển thị: không có;
    vị trí: tuyệt đối;
    màu nền: #f1f1f1;
    chiều rộng tối thiểu: 160px;
    hộp bóng: 0px 8px 16px 0px rgba(0,0,0,0.2);
    chỉ số z: 1;
}
.dropdown-nội dung a {
    màu sắc: đen;
    đệm: 12px 16px;
    trang trí văn bản: không có;
    hiển thị: khối;
}
.dropdown-content a:hover {
    màu nền: #ddd;
}
.dropdown:hover .dropdown-content {
    hiển thị: khối;
}
.dropdown: di chuột .dropbtn {
    màu nền: #f6f6f6;
}
.nav-nút{
    màu nền: #fff1f1;
    màu sắc: Đen;
    đệm: 8px 16px;
}
#đăng nhập-btn{
    vị trí: tương đối;
    hiển thị: khối nội tuyến;
    margin-left: tự động;
}
#đăng-ký-nút{
    vị trí: tương đối;
    hiển thị: khối nội tuyến;
    float: phải;
    đệm bên trái: 20px;
}
#nút-đăng-cập, #nút-đăng-ký {
    float: phải;
}
#nhóm-nav{
    vị trí: tương đối;
    đệm bên trái: 20px;
}
thân hình {
    hiển thị: flex;
    flex-direction: cột;
    chiều cao tối thiểu: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", không có chân;
    màu nền: #666666;
}
chân trang {
    màu nền: #999999;
    kích thước nền: 50px;
    chiều cao : tính toán (100vh/8);
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
    justify-content: khoảng cách giữa;
    lề trên cùng: tự động;
    tràn: ẩn;
}
.footer-links {
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
}
.footer-links một {
    lề trái: 20px;
}
#đăng ký-tiêu-đề-khởi-xuất{
     lề dưới: 10px;
 }
#đăng ký-tiêu đề-khởi tạo h2 {
    cỡ chữ: 24px;
    font-weight: đậm;
    căn chỉnh văn bản: ở giữa;
    tràn-bọc: ngắt-từ;
}

#đăng ký-khởi tạo-thân-h1 {
    cỡ chữ: 16px;
    font-weight: đậm;
    căn chỉnh văn bản: ở giữa;
}

#đăng ký-cơ-thể-init p {
    cỡ chữ: 16px;
    căn chỉnh văn bản: ở giữa;
}

#đăng ký-footer-init p {
    cỡ chữ: 14px;
    căn chỉnh văn bản: ở giữa;
}
#đăng ký-footer-init{
    viền trên cùng: 1px rắn;
}
.lối vào{
    chiều rộng: 100%;
}
#signup-footer-init a {
    cỡ chữ: 14px;
    căn chỉnh văn bản: ở giữa;
}
.popup-đăng ký-khởi tạo {
    viền: 2px màu đen đặc;
    đệm: 10px;
    chiều rộng: 45%;
    chiều rộng tối đa: 400px;
    màu nền: #999;
    bán kính đường viền: 5px;
    vị trí: tuyệt đối;
    trên cùng: 50%;
    bên trái: 50%;
    biến đổi: dịch chuyển (-50%, -50%);
    khả năng hiển thị: có thể nhìn thấy;

}
.terms-container {
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
}

.gửi lại-container {
    hiển thị: flex;
    căn chỉnh các mục: ở giữa;
}
#liên-kết-thuật-thuật
    color:blue;
}
#điều khoản{
    lề phải: 5px;
}
#termsLỗi{
    hiển thị: không có;
    màu sắc: đỏ;
}

@media chỉ màn hình và (chiều rộng tối đa: 700px) {
    .popup-đăng ký-khởi tạo {
        chiều rộng: 20%;
    }
}



<đầu>
    
    
    Đăng ký
    

    



    


    
    

        Liên hệ với chúng tôi
        Điều khoản sử dụng






Thêm câu trả lời
27 4 0
trợ lý lỗi
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Bài viết phổ biến của tác giả
Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress