میڈیا سوالات کے بغیر انکولی ترتیب تعمیر کریں

Sep 13, 2025

کيسے

ایک طویل عرصے سے میں ویب صفحات پر ایک بہترین بصری ساخت تک پہنچنے کی کوشش کر رہا تھا. میں اپنے روزانہ کام میں سی ایس ایس بریک پوائنٹس کے ساتھ بہت زیادہ درد کر رہا ہوں اور ذمہ دار ترتیب کو سنبھالنے کے عام طریقوں سے کبھی مطمئن نہیں تھا. حال ہی میں، میں نے ایک بہت اچھا پتہ چلا ذمہ دار ویب ڈیزائن چال جو سب کچھ سادہ، مستقل اور منطقی بنا دیتا ہے، اور میں آپ کے ساتھ اس کا اشتراک کرنے کے شوقین ہوں.

یہ مضمون بنیادی طور پر تخلیقی ترقی کے بارے میں ہے، اس طرح یہ دونوں کے لئے ہے: سامنے کے آخر میں ڈویلپرز جو اس تکنیک کو مفید، اور ویب ڈیزائنرز کو تلاش کرسکتے ہیں جو ویب پروڈکشن کی عام تفہیم اور حتمی پیداوار کو بہتر بنانے کے لۓ. میں سمجھتا ہوں کہ آپ پہلے سے ہی سی ایس ایس، بریک پوائنٹس اور ذرائع ابلاغ کے سوالات کے بارے میں جانتے ہیں.

گرڈ اور FlexBox کے ساتھ ایک بلاگ بنائیں

روایتی انداز

Adaptive layouts: breakpoints — بریک پوائنٹس غیر معیاری نقطہ نظر کے لئے ناپسندیدہ نتائج کی قیادت کرسکتے ہیں

پورٹ ایبل آلات دنیا بھر میں لے رہے ہیں. تمام قسم کے آلات کی ایک قسم جس طرح ہم ویب سائٹس تخلیق کرتے ہیں وہ تبدیل کر رہے ہیں. 'ایک ذمہ دار ویب سائٹ' کی طرف سے زیادہ تر لوگ صرف ڈیسک ٹاپ اور موبائل ورژن (کبھی کبھی ڈیسک ٹاپ، ٹیبلٹ، موبائل) سمجھتے ہیں. یہ روایتی طور پر کام کرتا ہے:

 H1 {
فونٹ سائز: 80px؛
}
.container {
چوڑائی: 980px؛
مارجن: 0 آٹو؛
}

media (زیادہ سے زیادہ چوڑائی: 1023px) {
H1 {
فونٹ سائز: 48px؛
}
.container {
چوڑائی: آٹو؛
Padding: 0 30px؛
}
}

حقیقت میں، عام طور پر ویب سائٹ کی ترتیب ہم دیکھ رہے ہیں کہ ہمارے آلے کے لئے نہیں بنایا گیا ہے. مثال کے طور پر، ہم دیکھتے ہیں کہ ہم کس طرح فونٹ سائز اور ایل ٹی؛ H1 اور GT کو ایڈجسٹ کرتے ہیں؛ عنوان:

Adaptive layouts — صرف ایک وقفے وقفے کے ساتھ آپ عجیب لگتے ہوئے نقطہ سائز کے ساتھ ختم ہوسکتے ہیں

آپ دیکھتے ہیں، ہمارے & lt؛ h1 & gt؛ عنوان میں "فونٹ سائز: 48px" 320px اور 800px چوڑائی ڈیوائس، اور "فونٹ سائز: 80px" پر 1024px اور 2560px پر ہے.

یقینا، ہم زیادہ بریک پوائنٹس شامل کر سکتے ہیں، لیکن مختلف آلات کی تعداد بے شمار ہیں! یہ ڈیزائن کی چشموں کو بہت پیچیدہ اور الجھن بنانے کے لئے جا رہا ہے، کیونکہ یہ جاننا مشکل ہے کہ کون سی قیمت جس کی سکرین پر لاگو ہوتا ہے.

Adaptive layouts: font size — آپ ہر اسکرین پر فونٹ کا سائز کامل حاصل کرنے کے لئے کافی بریک پوائنٹس کبھی نہیں بنا سکتے ہیں

ہمیں کیا ضرورت ہے یہ ہے:

Viewport Units.

Adaptive layouts: viewpoint units — Viewport یونٹس معاملات کو بہتر بنانے کے، لیکن وہ اب بھی کام کی ضرورت ہے

اس مسئلہ کا حل Viewport یونٹس VW اور VH شامل ہے. یہ لمبائی یونٹ ہیں 1 / 100th کی طرف سے Viewport کی چوڑائی / اونچائی (بڑے پیمانے پر IE9 + سے براؤزر کی طرف سے وسیع پیمانے پر کی حمایت کی) کی نمائندگی کرتے ہیں.

ہم اس کے سائز کے مطابق ویب پیج کی خصوصیات کو ایڈجسٹ کرنے کے لئے ان کا استعمال کرسکتے ہیں. صورتحال تھوڑی بہتر ہو گی، لیکن درد اب بھی ایک ہی ہے:

 H1 {
فونٹ سائز: کیلک ((80/1920) * 100VW؛
}
.container {
چوڑائی: 80VW؛
مارجن: 0 آٹو؛
}

media (زیادہ سے زیادہ چوڑائی: 1023px) {
H1 {
فونٹ سائز: کیلک ((48/375) * 100VW؛
}
.container {
چوڑائی: 90 وی ڈبلیو؛
}
}

ہم کبھی نہیں جانتے ہیں کہ یہ بہت بڑا یا بہت چھوٹا ہے.

ہم کس طرح ایک حقیقی انکولی ترتیب ترتیب کے نظام کی تعمیر کر سکتے ہیں؟ ہم کس طرح ایک ذمہ دار ویب سائٹ کو ڈیزائن کرتے ہیں جو 320px سے 2560px تک کام کرتا ہے؟

مثالی طور پر، آپ کے مذاق کو ترتیب کے پیچھے منطق کی وضاحت کرنا چاہئے، اور یہ کس طرح ایک چھوٹا سا قرارداد سے بڑا ہے.

حل

Adaptive layouts: solution — یہاں ایک حقیقی انکولی ترتیب سسٹم بنانے کا طریقہ ہے

ہم ایک چھوٹی سی اسکرین سے ایک بڑی طرف سے خصوصیات کو مسلسل ایڈجسٹ کرنا چاہتے ہیں. کوئی بریک پوائنٹس نہیں اور کوئی میڈیا سوالات نہیں. ہم چاہتے ہیں کہ ایک واحد قیمت ہے جو ہر ڈسپلے کے لئے کام کرتا ہے.

دو متغیرات کے ساتھ ریاضی کی تقریب کلید ہے. مثال کے طور پر، اگر ہم ایک عنوان فونٹ سائز کو ایڈجسٹ کرنا چاہتے ہیں، تو یہ کام اس طرح نظر آنا چاہئے:

1920x + Y = 80.
375x + Y = 48.

1920 - ایک ڈیزائن Mockup میں ڈیفالٹ ڈیسک ٹاپ چوڑائی (100VW کے برابر)
375 - ایک ڈیزائن Mockup میں ڈیفالٹ موبائل چوڑائی (100VW کے برابر)
ڈیسک ٹاپ پر 80 - مطلوب H1 عنوان فونٹ سائز
48 - موبائل پر مطلوب H1 عنوان فونٹ کا سائز

یہ ایکس اور Y اقدار ہیں:

x = (80 - 48) / (1920 - 375)
x = 0.0207.

Y = 80 - 1920 * 0.0207.
y = 40.256.

ان اقدار کو استعمال کرنے کے لئے ہمیں ویب پیج پر حساب انجام دینے کے لئے کیلس سی ایس ایس فنکشن کی ضرورت ہوگی (بڑے پیمانے پر IE9 + سے براؤزر کی طرف سے وسیع پیمانے پر کی حمایت کی). ہمیں X * 100 بار شمار کرنا چاہئے (کیونکہ 1VW یونٹ = 1/100 Viewport چوڑائی کے 1 / 100th).

ہم اپنی اصل تقریب لیتے ہیں:
1920x + Y = 80.
375x + Y = 48.

100VW کے ساتھ 1920 کو تبدیل کریں:
100VW * X + Y = مطلوبہ قیمت

اقدار کے ساتھ ایکس اور Y کو تبدیل کریں:
100VW * 0.0207 + 40.256 = مطلوبہ قیمت

ہم حتمی سی ایس ایس سٹائل حاصل کرتے ہیں:

 H1 {فونٹ سائز: کیلک (2.07VW + 40.25px)}

حیرت انگیز طور پر کافی، یہ آخر میں کام کرتا ہے کہ ہم کس طرح چاہتے ہیں!

تمام ڈسپلے کے لئے صرف ایک پراپرٹی. اقدار کو بار بار دوبارہ بار بار کرنے کی کوئی ضرورت نہیں. آپ کسی بھی قسم کی خصوصیات کو ایڈجسٹ اور حساب کر سکتے ہیں: چوڑائی، فونٹ سائز، پڈنگنگ، مارجن، وغیرہ.

چلو اس ٹیکنالوجی کا استعمال کرتے ہوئے ایک حقیقی ترتیب کی تعمیر کرنے کی کوشش کریں:

لیکن یہ نقطہ نظر ایک نقصان ہے: یہ سمجھنا مشکل ہے کہ اس کیلک تقریب کے پیچھے کیا قدر ہے. ہم اسے کس طرح آسان بنا سکتے ہیں؟

اگر آپ ایچ ٹی ایم ایل روزانہ کوڈنگ کر رہے ہیں، تو آپ شاید SASS / SCSS پری پروسیسرز سے واقف ہیں. یہاں آپ کے لئے ایک چھوٹی سی مدد ہے: چلو "مکسین" بناتے ہیں اور ان تمام حسابات کو خود کار طریقے سے بناتے ہیں، اور اب بھی ہماری اصل اقدار کو برقرار رکھنا.

یہ ایک ہی فنکشن ہے جیسا کہ اوپر بیان کیا گیا ہے، لیکن ایک ساس مکسین کے طور پر بنایا گیا ہے:

 $ ڈسپلے وسیع: 1920.
$ ڈسپلے-تنگ: 375.

mixin سیال ($ پراپرٹی، $ minvalue، $ maxvalue)
  $ X: ($ Maxvalue - $ minvalue) / ($ ڈسپلے وسیع - $ ڈسپلے-تنگ)
  $ Y: $ MAXVALUE - $ ڈسپلے وسیع * $ ایکس
  # {$ پراپرٹی}: کیلک (# {100 * $ x} vw + # {$ Y} PX)

H1.
  vludlude سیال ('فونٹ سائز'، 48،80)

.container.
  vludlude سیال ('چوڑائی'، 315،1580)
vludlude سیال ('Padding'، 30،60)

Adaptive layouts: mixin — ایک ساس مکسین پوری عمل کو آسان بنا سکتا ہے

یہ تکنیک آخر میں ذمہ دار ویب ترتیبات کو بہتر بنانے کے لئے ایک بہت ہی جدید حل فراہم کرتا ہے. یہ زیادہ تر براؤزر کی حمایت کرتا ہے، آپ کے منصوبے کو صحیح طریقے سے ایک وزیٹر کو دکھایا جاسکتا ہے، آپ کے شیلیوں کی ساخت کو آسان بناتا ہے، اور سب سے اہم بات آپ کے ویب ترتیب کو مسلسل اور منطقی بنا دیتا ہے. مجھے امید ہے کہ یہ آپ کو کچھ حیرت انگیز ویب منصوبوں کو شروع کرنے میں مدد مل سکتی ہے.

متعلقہ مضامین:

17 واقعی مفید ذمہ دار ویب ڈیزائن سبق
ذمہ دار ویب نوع ٹائپ کے قواعد
سی ایس ایس گرڈ کے ساتھ ایک ذمہ دار ترتیب بنائیں

میڈیا سوالات کے بغیر انکولی ترتیب تعمیر کریں

روایتی انداز

Viewport Units.

حل

کيسے - انتہائی مشہور مضامین

میگا چہرے ڈرائنگ کے لئے 17 تجاویز

Illustrator میں ایک اپلی کیشن آئکن کیسے بنائیں

سی ایس ایس متغیرات کے ساتھ سائٹ تھیم قائم کرنے کے لئے کس طرح

Keep perfect version control with Abstract

Chatbot تجربہ کس طرح ڈیزائن کرنے کے لئے

گرافک ڈیزائنرز کے لئے 3D متن ٹیوٹوریل

UX حکمت عملی کے چار اصول

Illustrator میں علامت (لوگو) بنائیں

اقسام