التصميم رائع، هذه المرة يعتمد حقًا على مسودة التصميم، لأنه الآن، أي آلة هي آلة قياسية وفقًا لمسودة التصميم! زملاء المطورين، الآن يمكنك فقط قراءة التعليقات التوضيحية لمسودة التصميم مباشرة!
التكيف مع الشاشةيجب أن يشير تكيف الشاشة إلى علاقة التكيف بين منطقة تكيف المحتوى والفاصل الزمني للشاشة.
يتضمن التكيف على شاشة واحدة الاحتواء أو التغطية أو التعبئة، ويعتمد التكيف على الشاشات المتعددة عادةً على العرض.
يحتاج الاحتواء والغطاء أيضًا إلى تحديد المواقع للتعامل مع المساحة البيضاء والمحتوى الزائد.
غالبًا ما يستخدم المحتوى المختلف في نفس H5 طرق تكيف مختلفة، أي الطبقات.
CSS المفضلبالنسبة لمشاكل الأداء مثل التكيف مع الشاشة، إذا كان من الممكن تنفيذها باستخدام CSS، فيجب تنفيذها باستخدام CSS.
التكيف طبقة كاملةمن أجل ضمان تحجيم عناصر كل طبقة بشكل متزامن دون تشويه، يجب أن تكون مساحة التكيف لكل طبقة مساوية لحجم مسودة التصميم.
التنفيذ المباشر هو إنشاء حاوية بنفس حجم منطقة التكيف وتكييف الطبقة بأكملها.
يمكن أن يكون هناك عدة عناصر بنفس طريقة التكيف في الحاوية.
خذ تطبيق svg كمثال:
<!doctype html><html><body><style>.layer { الموضع: مطلق؛ الأعلى: 0؛ العرض: 100% الارتفاع: 100%;</style><!-- ملء - -><svg class=layer viewBox=0 0 1080 1920 PreventAspectRatio=none> <!-- Container--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- يحتوي على المركز--><svg class=layer viewBox=0 0 1080 1920 يحافظ على AspectRatio=xMidYMid يجتمع> <!-- حاوية--> <rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- يحتوي على القاع--><svg class=layer viewBox=0 0 1080 1920 keepAspectRatio=xMidYMax meet> <!- - الحاوية--> <المستقيم x=444 y=1779 العرض=191 الارتفاع=39 fill=#1565C0/> <!-- العنصر--></svg></body></html>التأثير الفعلي:
يعد تكييف الطبقة بالكامل سهل التنفيذ، وتتم قراءة قيم مسودة التصميم مباشرة أثناء التطوير، مما يمكن أن يلبي احتياجات معظم الصفحات الثابتة.
ولكن عندما يكون هناك العديد من الرسوم المتحركة h5، عليك أن تأخذ في الاعتبار سلاسة الرسوم المتحركة وأداء الصفحة.
استخدم عناصر قابلة للاستبدال مثل <img> <object> <svg> كحاويات، واستخدم صور الخلفية كعناصر.
هناك عيوب في الأداء عند تطبيق الرسوم المتحركة CSS:
لتحسين أداء هذه التطبيقات، نحتاج إلى التركيز على الرسوم المتحركة للحاوية وتقليل حجم الحاوية، ومن الأفضل أن تكون مساوية للحد الأدنى للمساحة الإجمالية لجميع العناصر في الطبقة لتحقيق التكيف المبسط.
التكيف المبسط صيغةبالنسبة لعملية الاشتقاق، راجع اشتقاق صيغة تكيف الشاشة ذات الطبقات H5.
عرض مسودة التصميم هو v والارتفاع هو الإحداثي الأفقي للعنصر قبل التكيف هو y هو x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 الإحداثي y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 عرض w3 = (w/v)*u height h3 = (h/g)*f عندما يحتوي على عند تكييف الطريقة، تكون قيمة القياس s = Math.min(f/g, u/v) تمثل المساحة البيضاء اليسرى الأفقية إجمالي المساحة البيضاء o = (m*v - x)/w تمثل المسافة البيضاء العمودية إجمالي المساحة البيضاء p = ( n*g- y)/h عندما يتم تكييف وضع الغطاء، تكون قيمة القياس s = Math.max(f/g, u/v) يمثل الفائض الأفقي الأيسر إجمالي الفائض o = (x - m*v)/w الرأسي الفائض يمثل إجمالي الفائض p = (y - n*g)/h عندما تكون منطقة التكيف عموديًا في الأعلى، m = 0. عندما تكون متمركزة عموديًا، m = .5 عندما تكون عموديًا في الأسفل، m = 1. عندما يكون أفقيًا على اليسار، n = 0. عندما يكون متمركزًا أفقيًا، n = .5. عندما تكون أفقيًا على اليمين، n = 1 مقارنةً بتحسين ذاكرة تكيف الطبقة بأكملها (w3*h3)/(v1*g1) >= w*h/(v*g)<img> مثال على التنفيذ
عندما يكون الحد الأقصى للعرض w/v والحد الأقصى للارتفاع h/g، فإنه يتوافق مع التكيف المحتوي.
عند ضبط الحد الأدنى للعرض على w/v وضبط الحد الأدنى للارتفاع على h/g، فإن ذلك يتوافق مع تكيف الغلاف.
عندما يكون العرض w/v والارتفاع h/g، فهذا يعني تكيف التعبئة.
أثناء الاحتواء، إذا كان الحجم الأصلي للصورة أصغر من الحد الأقصى للعرض والحد الأقصى للارتفاع، فاستخدم التكبير/التصغير: 10 لتكبير الحجم الأصلي للصورة أو تعديله مباشرة.
أثناء تعديل الغلاف، إذا كان الحجم الأصلي للصورة أكبر من الحد الأدنى للعرض والحد الأدنى للارتفاع، فاستخدم التكبير/التصغير: .1 لتقليل الحجم الأصلي للصورة أو تعديله مباشرة.
نظرًا لأن النسبة المئوية في أعلى اليسار مرتبطة بعرض الشاشة u وارتفاعها f، فهي تتوافق مع m*u وn*f
نظرًا لأن النسبة المئوية في التحويل مرتبطة بالعرض w1 والارتفاع h1 للعنصر المُكيَّف، فهي تتوافق مع (m*v + x)/w*w1 و(n*f + y)/h*h1
<!doctype html><html><body><style>img { /* يمثل الحد الأدنى للعرض والحد الأدنى للارتفاع حاوية افتراضية*/ min-width: 50.37037037037037%; /* w3 = (w/v)*u Where w = 544، v = 1080 */ الحد الأدنى للارتفاع: 7.395833333333333%؛ /* h3 = (h/g)*f حيث h = 142، g = 1920 */ Zoom: .1; /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ الموضع: مطلق: 50%; حيث m = .5*/ top: 50%; /* n*f حيث n = .5 */ تحويل: ترجمةX(-48.34558823529412%) /* (x - m*v)/w*w1 حيث x = 277, م = .5، الخامس = 1080، ث = 544 */ TranslationY(378.8732394366197%); /* (y - n*g)/h*h1 حيث y = 1498, n = .5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- العنصر --></body></html> مثال على تنفيذ الخلفيةbackground-size contain فإنها تتوافق مع التكييف المحتوي.background-size عبارة عن cover فإنها تتوافق مع تكيف الغلاف.background-size 100% 100% يتوافق مع "تكيف التعبئة".background-position لها نفس p o <!doctype html><html><body><style>div { الموضع: العرض المطلق: 50.37037037037037%; /* w3 = w/v*u حيث w = 544, v = 1080 */ الارتفاع: 7.395833333333333% / * h3 = h/g*f حيث h = 142، g = 1920 */ الخلفية: url(http://ui.qzone.com/544x142) بدون تكرار /* صورة الخلفية كعنصر*/ حجم الخلفية: الغلاف الأيسر: 25.64814814814815%; ش حيث س = 277، الخامس = 1080 */ أعلى: 78.02083333333333%; /* y3 = y/g*f حيث y = 1498, g = 1920 */ الخلفية-position-x: -48.34558823529412%; /* o = (x - m*v)/w حيث m = .5 ، الخامس = 1080، س = 277، ث = 544*/ الخلفية-الموضع-y: 378.8732394366197%; div></div> <!-- الحاوية--></body></html><svg> مثال على التنفيذ
meetOrSlice الخاص بـ preserveAspectRatio meet فإنه يتوافق مع التكييف المحتوي.meetOrSlice الخاصة بـ preserveAspectRatio عبارة عن slice فإنها تتوافق مع تكيف الغلاف.preserveAspectRatio none ، فإنها تتوافق مع تكيف التعبئة.meetOrSlice الخاص بـ preserveAspectRatio هنا بالحاوية، وليس منطقة التكيف المستخدمة لتحديد transform ، ويتم تثبيت meetOrSlice الخاص بـ preserveAspectRatio على xMinYMin . <!doctype html><html><body><style>svg { الموضع: العرض المطلق: 50.37037037037037%; الارتفاع: 7.395833333333333% /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ top: 0; left: 0; تحويل: ترجمة X(99.26470588235294%) /* m*v/w*w3 حيث m = .5, v = 1080, w = 544 */ترجمY (676.056338028169%)؛ /*n*g/h*h3 حيث n = .5, g = 1920, h = 142 */ overflow: visual;}svg image { تحويل:ترجمX(-48.34558823529412%) /* (x - m*v)/w*w1 حيث x = 277, m = .5, v = 1080 , w = 544 */ TranslationY(378.8732394366197%); /* (y - n*g)/h*h1 حيث y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 protectedAspectRatio=xMinYMin meet> <!-- الحاوية--> <عرض الصورة=544 الارتفاع=142 xlink:href=http://ui.qzone.com/544x142/> <!-- العنصر --></svg></body></html> الأدوات المساعدةمن الصعب حساب النسب المئوية وكتابة CSS يدويًا، ويمكنك استخدام أدوات مثل sass للمساعدة في تبسيطها.
يعد العرض v والارتفاع g لمسودة التصميم ثوابت على مستوى الصفحة بشكل عام.
ما عليك سوى قراءة الإحداثيات x والإحداثيات y والعرض w والارتفاع h لكل عنصر في مسودة التصميم، ثم تقوم الأداة بإنشاء ملف css.
الآن لم يعد على والدتي أن تقلق بشأن مشكلات الاستعادة أو مشكلات التكيف مع الشاشة.
معالجة نصوص النص ثابت أو سطر واحد غير ثابت، يمكن لعلامة text svg التعامل معه
إذا كان النص ثابتًا أو سطرًا واحدًا غير ثابت، فيمكنك أيضًا تحويل النص إلى صور.
لم يتم إصلاح الأسطر المتعددة من النص. يمكنك استخدام كائن svg foreignObject لتضمين div
مقارنة الخطة
هناك العديد من حلول التكيف مع الشاشة، ما هي الطريقة التي يجب عليك اختيارها لتحقيق التكيف الكامل للطبقة أو التكيف المبسط؟
| يخطط | تكبير | موضع | تكبير النص | متناسق |
|---|---|---|---|---|
| نسبة الحشو الأعلى | لا يمكن إلا أن تكون متساهلة | ✓ | ✗ | ✓ |
| إطار العرض | ✓ | ✗ | ✓ | الدعم معقد |
| تناسب الكائن | ✓ | ✓ | ✗ | موبايل أندرويد 4.4.4+ |
| نسبة المحافظة على svg | ✓ | ✓ | ✓ | موبايل أندرويد 3.0+ |
| (الحد الأقصى/الدقيقة)-(العرض/الارتفاع) | ✓ | ✓ | نص ثابت | ✓ |
| حجم الخلفية | ✓ | ✓ | النص إلى الصورة | ✓ |
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.