rem (ขนาดตัวอักษรขององค์ประกอบรูท) หมายถึงหน่วยของขนาดตัวอักษรที่สัมพันธ์กับองค์ประกอบรูท (เช่น องค์ประกอบ html)
สมมติว่าขนาดตัวอักษรขององค์ประกอบรูทคือ 10px ขนาดของ 5rem คือ 5*10=50px เป็นต้น
html{ ขนาดตัวอักษร: 10px;}p{ ความกว้าง: 2rem; /* 2*10 = 20px;*/ ระยะขอบ: 1rem;} rem เพื่อการปรับตัวในอดีตเรามักจะใช้หน้านี้: ตั้งค่าความกว้างของวิวพอร์ตเป็นความกว้างของอุปกรณ์ จากนั้นเลือกความกว้างขั้นต่ำของอุปกรณ์ที่เราต้องเข้ากันได้ (ปกติคือ 320px) สร้างเพจตามความกว้างขั้นต่ำนี้ หน่วยใช้ px และเปอร์เซ็นต์ บนอุปกรณ์ที่มีความกว้างต่างกัน ขนาดตัวอักษรและขนาดเนื้อหาของหน้าจะเท่ากัน ข้อแตกต่างคือช่องว่างระหว่างเนื้อหาบนหน้าจอขนาดใหญ่จะใหญ่กว่าบนหน้าจอขนาดเล็ก ดังนั้นข้อเสียคือหน้าเว็บแสดงผลได้ไม่ดีบนอุปกรณ์บางขนาด
หากเราใช้ rem เพื่อสร้างเพจ เราจะตั้งค่าขนาดฟอนต์ที่แตกต่างกันบนองค์ประกอบรูทตามความกว้างของอุปกรณ์ที่แตกต่างกัน ยิ่งความกว้างกว้างเท่าใด ขนาดตัวอักษรก็จะใหญ่ขึ้นเท่านั้น จากนั้นใช้ rem เพื่อแทนที่ px ดั้งเดิม ด้วยวิธีนี้ขนาดตัวอักษร ขนาดเนื้อหา คู่จะใหญ่ขึ้นเมื่อความกว้างของหน้าจอใหญ่ขึ้น
ขั้นแรก js ตั้งค่าขนาดตัวอักษรเริ่มต้นเป็น html (เขียนไว้ที่ส่วนหัวของ html)
<script type=text/javascript> var bodyElement = document.documentElement ||. document.body, RC = { w: 750, h: 1206 }, // ความกว้างและความสูงของร่างการออกแบบเริ่มต้น GC = { w: document.documentElement.clientWidth |. |. window.innerWidth ||. screen.width, h: document.documentElement.clientHeight || screen.height }; ฟังก์ชั่น setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , LastHTMLSize = 16, // ค่าเริ่มต้น 16 เป็นเพราะขนาดตัวอักษรเริ่มต้นของ html คือ 16px html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // หน้าจอยาว LastHTMLSize = 16; }else if(rightSize < currentSize){ // หน้าจอกว้าง LastHTMLSize = (RC.h / GC.h * GC . w) / RC.w * 16; } html.style.fontSize = GC.w / LastHTMLSize + 'px'; } setFontSize();</script>ตั้งค่าไฟล์ scss px เป็น rem
// ค่าเริ่มต้น 16 คือขนาดตัวอักษรเริ่มต้นของ HTML // ค่าเริ่มต้น 750 คือความกว้างเริ่มต้นของร่างการออกแบบ // $n คือระยะห่างที่วัดจากร่างการออกแบบ @charset UTF-8; { @return $n / (750/16)+rem;}แก้ไขฟังก์ชั่นเพื่อให้โทรง่าย:
@function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { // เปลี่ยนตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: rem($top); ระยะขอบ: 0 0 0 getLeft($left) ;}@ mixin centerlt($left, $top) { //ตำแหน่งกึ่งกลางขึ้นและลง, ซ้ายและขวา: สัมบูรณ์; ซ้าย: 50%; ระยะขอบ: getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) { //ขึ้นและลง, ซ้ายและขวาตำแหน่งตรงกลาง: สัมบูรณ์; ขวา: 50%; ระยะขอบ: getTop($top) getRight ($right) 0 0;}@mixin middlert($right, $top) { // เปลี่ยนตำแหน่งขึ้น, ลง, ตรงกลาง, ขวา: สัมบูรณ์; ขวา: rem($right); บน: getTop( $บน) 0 0 0;}@mixin centerb($left, $bottom) { //เปลี่ยนตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านล่าง: rem($bottom); ระยะขอบ: 0 0 0 getLeft($left); leftTop($left, $top) { //เปลี่ยนจากซ้ายไปบนสุด: แน่นอน; ซ้าย: rem($left); ด้านบน: rem($top);}@mixin rightTop($right, $top) { //เปลี่ยนขวาเป็นตำแหน่ง: แน่นอน; ขวา: rem($right); top: rem($top);}@mixin leftBottom($left, $bottom) { // เปลี่ยนขวาเป็นตำแหน่ง: แน่นอน; ซ้าย: rem($left); ด้านล่าง: rem($bottom);}เรียกใช้ฟังก์ชันด้านบน (สามารถวัดความกว้างและความสูงได้ในหน่วย ps เพื่อวัดระยะทางจริง ความกว้างของร่างการออกแบบเริ่มต้นคือ 750):
.page1-img1{ ความกว้าง: rem(473); ความสูง: rem(173); @include centerlt(139, 767);}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network