الحل المستجيب الأكثر استخدامًا لـ h5 للمحطات الطرفية المتنقلة في السنوات الأخيرة هو الحل rem. يتطلب هذا حساب حجم خط العنصر الجذر لتحقيق الاستجابة.
ولكن هذا الحل له أيضًا عيب، وهو أنه عندما لا يكون حجم الخط عددًا صحيحًا، فإن بعض الخطوط تستخدم وحدات rem، مما قد يسبب مشاكل في حجم عرض الخط، ولا يزال هذا يمثل صداعًا لتطوير الواجهة الأمامية للمشاريع مع متطلبات استعادة بصرية عالية.
إن حل مشكلة استجابة الواجهة الأمامية ليس أكثر من مجرد القدرة على العرض بشكل طبيعي على أجهزة مختلفة. نقدم هنا حلاً سريع الاستجابة لا يتطلب طريقة rem. استخدم px مباشرة ما نتحدث عنه هنا هو مسودة التصميم المبنية على 750 بكسل. كم بكسل قمت بقياسه في مسودة التصميم؟
اكتب مباشرة كم بكسل. أليس هذا سريعًا جدًا ولا يتطلب تحويل العينية؟
هنا نستخدم في الواقع مقياس التحويل لقياس حجم الصفحة لتحقيق الاستجابة.
الكود الأساسي:
Let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') Let page = document.getElementById(page); , 0 0); page.style.setProperty(transform,scale(+ _scale + )); //متوافق مع ios8 page.style.setProperty(-webkit-transform-origin, 0 0);page.style.setProperty(-webkit-transfrom,scale(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin , 0 0); page.style.setProperty(transform,scale(+ _scale + )); //متوافق مع ios8 page.style.setProperty(-webkit-transform-origin, 0 0);page.style.setProperty(-webkit-transfrom,scale(+ _scale + )); document.body.style.setProperty('visibility', 'visible ') }, 100); } screenMatch();في الكود أعلاه، العقدة التي تحمل معرف الصفحة هي عقدة البداية لعنصر الصفحة بأكمله والعنصر الأول أسفل النص. هنا يحتاج body/html إلى ضبط min-height:100%;height:100%;
في الواقع، يمكننا أيضًا استخدام وحدات px في البرامج المصغرة، ولكن ستكون هناك بعض الأخطاء المتعرجة في الخطوط عند استخدام التحويل في البرامج المصغرة، وأخيرًا، قمنا للتو بتغيير سمة التكبير/التصغير واستخدمنا -webkit-zoom للتوافق. لا يختلف الكود الأساسي كثيرًا عن h5. نفس الشيء هو حجم التكبير.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.