Vào nghề 3 ngày, tôi muốn hỏi về margin, position và mấy thứ khác nữa
Chào anh chị bạn, ba ngày trước tôi vừa đi tới một quyết định đấy là tạo ra một trang web riêng cho mình, dĩ nhiên với kinh nghiệm và kiến thức là bằng không thì chuyện này với tôi là một thử thách nhỏ, tuy vậy nhờ w3chools, css-tricks cùng mấy anh ở StackOverflow thì tôi cũng nặn ra một cái khiêm tốn đây.
Mục tiêu ở đây của tôi không gì khác là một mẩu giấy viết tên mình, với yêu cầu tự đặt ra là làm sao để tỉ lệ của nó được giữ nguyên vẹn dù với kích cỡ màn hình máy tính, điện thoại hay trình duyệt nào. Và như mọi người cũng thấy, tôi dám nhận là mình đã phần nào làm được những gì cần. Tuy nhiên, vẫn còn những chi tiết mà tôi rất muốn sửa chữa và mài dũa thêm nhưng không biết cách làm? Đấy là:
-
Khi truy cập trên iPhone, kiểu chữ đổi từ Times sang Times New Roman. Tại sao lại thế? Nếu được, tôi muốn Times luôn luôn hiển thị.
-
Thêm margin, làm sao để khi nhìn trên điện thoại hoặc khi kéo thật hẹp của sổ trình duyệt, có một khoảng không nhỏ giữa tờ giấy và hai bên viền?
-
Trên máy Mac, dòng chữ dưới hơi bị lệch khi xem trên Chrome, trong khi đó trên Safari hoàn toàn bình thường. (Lưu ý ở đây, ký tự H là một góc ảnh, không phải text.)
-
Tôi phải thay đổi gì ở phần code để biến nó trở nên tối ưu nhất?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.paper {
width: auto;
height: 90vh;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute
}
.box {
width: 63.5vh;
height: 90vh;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
background-color: green
}
.text {
position: absolute;
font-family: times-roman;
font-size: 10.1vh
}
.link {
position: absolute;
font-family: helveticaneue-lightItalic;
font-size: 13px;
text-decoration: none
}
</style>
</head>
<body>
<div class="box">
<img class="paper" draggable="false" src="paper.png">
<div class="text" style="top: 3vh; left: 5.4vh">LÊ</div>
<div class="text" style="top: 3vh; right: 5.4vh">HỮU</div>
<div class="text" style="bottom: 3vh; left: 5.4vh; right: 5.4vh">TÙNG AN</div>
</div>
</body>
</html>
