[{"data":1,"prerenderedAt":513},["ShallowReactive",2],{"article-\u002Farticles\u002F65f1c83b6de8b691d83ad3a4":3},{"id":4,"title":5,"articleId":6,"body":7,"cover":494,"coverThumb":494,"created":495,"date":496,"description":497,"extension":498,"meta":499,"navigation":500,"path":501,"seo":502,"stem":503,"tags":504,"updated":511,"__hash__":512},"articles\u002Farticles\u002F65f1c83b6de8b691d83ad3a4.md","حجم خط مرن وملائم لكل الشاشات","65f1c83b6de8b691d83ad3a4",{"type":8,"value":9,"toc":490},"minimark",[10,14,30,33,36,39,42,50,53,257,260,270,273,279,286,330,333,336,399,402,408,413,431,483,486],[11,12,13],"p",{},"الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،",[15,16,17],"blockquote",{},[11,18,19,20],{},"يرجى العلم أن هذا المقال مترجم بتصرف من المقال بعنوان Responsive Font Size (Optimal Text at Every Breakpoint) ولقراءة المقال الأصلي يمكنك ذلك ",[21,22,29],"a",{"href":23,"rel":24,"target":28},"https:\u002F\u002Fmatthewjamestaylor.com\u002Fresponsive-font-size",[25,26,27],"nofollow","noopener","noreferrer","_blank","من الرابط",[11,31,32],{},"إن التصميم المرن (Responsive design) لا يقتصر فقط على هيكل وبنية صفحة الويب، حجم الخط أيضا يمكن أن يكون مرن وتفاعلي.",[11,34,35],{},"على الشاشات الصغيرة مثل شاشة الموبايل مساحة العرض أقل، وبالتالي من المنطقي استخدام حجم خط صغير - دون الإخلال بوضوح النص وسهولة قراءته، ولعل أنسب حجم خط للشاشات الصغيرة هو 16 بكسل.",[11,37,38],{},"بينما على الشاشات الأكبر مثل التابلت والكمبيوتر يتوفر لديك مزيد من المساحة يمكنك استغلالها في عرض حجم أكبر للخطوط، حيث يتراوح حجم الخط المناسب بين 18 إلى 20 بكسل.",[11,40,41],{},"بناء على ما سبق، يمكن جعل حجم الخط تفاعلى بناء على مقاس الشاشة كالتالي",[43,44,46],"h2",{"id":45},"تثبيت-حجم-مناسب-لكل-نقطة-توقف-breakpoint",[47,48,49],"strong",{},"تثبيت حجم مناسب لكل نقطة توقف (Breakpoint)",[11,51,52],{},"في هذه الطريقة نقوم باختيار حجم مناسب لكل \"نقطة توقف\" عند التعامل مع التصميم المرن في ملفات التنسيق (CSS)، كما في الكود التالي",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-css shiki shiki-themes github-dark","body {\n    font-size: 16px;\n}\n@media (min-width:768px) {\n    body {\n        font-size: 18px;\n    }\n}\n@media (min-width:1024px) {\n    body {\n        font-size: 19px;\n    }\n}\n@media (min-width:1280px) {\n    body {\n        font-size: 20px;\n    }\n}\n","css","",[61,62,63,76,96,102,125,133,148,154,159,177,184,198,203,208,226,233,247,252],"code",{"__ignoreMap":59},[64,65,68,72],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"s4JwU","body",[64,73,75],{"class":74},"s95oV"," {\n",[64,77,79,83,86,89,93],{"class":66,"line":78},2,[64,80,82],{"class":81},"sDLfK","    font-size",[64,84,85],{"class":74},": ",[64,87,88],{"class":81},"16",[64,90,92],{"class":91},"snl16","px",[64,94,95],{"class":74},";\n",[64,97,99],{"class":66,"line":98},3,[64,100,101],{"class":74},"}\n",[64,103,105,108,111,114,117,120,122],{"class":66,"line":104},4,[64,106,107],{"class":91},"@media",[64,109,110],{"class":74}," (",[64,112,113],{"class":81},"min-width",[64,115,116],{"class":74},":",[64,118,119],{"class":81},"768",[64,121,92],{"class":91},[64,123,124],{"class":74},") {\n",[64,126,128,131],{"class":66,"line":127},5,[64,129,130],{"class":70},"    body",[64,132,75],{"class":74},[64,134,136,139,141,144,146],{"class":66,"line":135},6,[64,137,138],{"class":81},"        font-size",[64,140,85],{"class":74},[64,142,143],{"class":81},"18",[64,145,92],{"class":91},[64,147,95],{"class":74},[64,149,151],{"class":66,"line":150},7,[64,152,153],{"class":74},"    }\n",[64,155,157],{"class":66,"line":156},8,[64,158,101],{"class":74},[64,160,162,164,166,168,170,173,175],{"class":66,"line":161},9,[64,163,107],{"class":91},[64,165,110],{"class":74},[64,167,113],{"class":81},[64,169,116],{"class":74},[64,171,172],{"class":81},"1024",[64,174,92],{"class":91},[64,176,124],{"class":74},[64,178,180,182],{"class":66,"line":179},10,[64,181,130],{"class":70},[64,183,75],{"class":74},[64,185,187,189,191,194,196],{"class":66,"line":186},11,[64,188,138],{"class":81},[64,190,85],{"class":74},[64,192,193],{"class":81},"19",[64,195,92],{"class":91},[64,197,95],{"class":74},[64,199,201],{"class":66,"line":200},12,[64,202,153],{"class":74},[64,204,206],{"class":66,"line":205},13,[64,207,101],{"class":74},[64,209,211,213,215,217,219,222,224],{"class":66,"line":210},14,[64,212,107],{"class":91},[64,214,110],{"class":74},[64,216,113],{"class":81},[64,218,116],{"class":74},[64,220,221],{"class":81},"1280",[64,223,92],{"class":91},[64,225,124],{"class":74},[64,227,229,231],{"class":66,"line":228},15,[64,230,130],{"class":70},[64,232,75],{"class":74},[64,234,236,238,240,243,245],{"class":66,"line":235},16,[64,237,138],{"class":81},[64,239,85],{"class":74},[64,241,242],{"class":81},"20",[64,244,92],{"class":91},[64,246,95],{"class":74},[64,248,250],{"class":66,"line":249},17,[64,251,153],{"class":74},[64,253,255],{"class":66,"line":254},18,[64,256,101],{"class":74},[11,258,259],{},"بالرغم أن الطريقة السابقة تحقق الهدف، لكن يوجد بها مشكلتين:",[261,262,263,267],"ul",{},[264,265,266],"li",{},"حجم الخط قد يكون ملائم عند \"نقطة توقف\" معينة لكن ما بين نقاط التوقف قد يكون حجم الخط أكبر أو أقل من المناسب.",[264,268,269],{},"هذه الطريقة تتطلب كتابة أكواد كثيرة في أماكن متفرقة بناء على كل نقطة توقف، مما يؤثر على جودة الكود المكتوب وسهولة تعديله.",[11,271,272],{},"لحسن الحظ هناك طريقة أخرى أكثر بساطة",[43,274,276],{"id":275},"جعل-حجم-الخط-مرن-و-انسيابي",[47,277,278],{},"جعل حجم الخط مرن و انسيابي",[11,280,281,282,285],{},"بدلا من تثبيت حجم خط لكل نقطة توقف، يمكن كتابة واستخدام معادلة حسابية لحساب حجم الخط بناء على اتساع الشاشة، ويتم تحقيق ذلك باستخدام الدالة ",[61,283,284],{},"()calc"," الموجودة في ملفات التنسيق (CSS) كالتالى",[54,287,289],{"className":56,"code":288,"language":58,"meta":59,"style":59},"body {\n    font-size: calc(15px + 0.390625vw);\n}\n",[61,290,291,297,326],{"__ignoreMap":59},[64,292,293,295],{"class":66,"line":67},[64,294,71],{"class":70},[64,296,75],{"class":74},[64,298,299,301,303,306,309,312,314,317,320,323],{"class":66,"line":78},[64,300,82],{"class":81},[64,302,85],{"class":74},[64,304,305],{"class":81},"calc",[64,307,308],{"class":74},"(",[64,310,311],{"class":81},"15",[64,313,92],{"class":91},[64,315,316],{"class":91}," +",[64,318,319],{"class":81}," 0.390625",[64,321,322],{"class":91},"vw",[64,324,325],{"class":74},");\n",[64,327,328],{"class":66,"line":98},[64,329,101],{"class":74},[11,331,332],{},"المعادلة السابقة تقوم بحساب حجم الخط 15 بكسل ويضاف عليها 0.00390625% من حجم الشاشة.",[11,334,335],{},"الرقم السابق تم اختياره بعناية بحيث يحقق أفضل حجم مثالي لكل نقطة توقف، كالتالي",[261,337,338,349,358,367,375,383,391],{},[264,339,340,341,344,345,348],{},"عند اتساع ",[61,342,343],{},"320px"," يكون حجم الخط ",[61,346,347],{},"16px"," (مثال موبايل ايفون 4 و5)",[264,350,340,351,344,354,357],{},[61,352,353],{},"768px",[61,355,356],{},"18px"," (جهاز لوحي \"آيباد\" وضع رأسي)",[264,359,340,360,344,363,366],{},[61,361,362],{},"1024px",[61,364,365],{},"19px"," (جهاز لوحي \"آيباد\" وضع أفقي)",[264,368,340,369,344,372],{},[61,370,371],{},"1280px",[61,373,374],{},"20px",[264,376,340,377,344,380],{},[61,378,379],{},"1536px",[61,381,382],{},"21px",[264,384,340,385,344,388],{},[61,386,387],{},"1920px",[61,389,390],{},"23px",[264,392,340,393,344,396],{},[61,394,395],{},"2560px",[61,397,398],{},"25px",[11,400,401],{},"لاحظ معي كيف أن هذه الطريقة أكثر بساطة وقوة من السابقة.",[11,403,404,407],{},[47,405,406],{},"تريد مثال على هذه الطريقة ؟"," موقعي (الذي تتصفحه الآن) يستخدم نفس هذه الطريقة ليحقق حجم خط مرن وتفاعلي، جرب أن تعدل حجم الشاشة في متصفحك لتشاهد النتيجة بنفسك!",[11,409,410],{},[47,411,412],{},"معلومة أخيرة",[11,414,415,416,419,420,422,423,426,427,430],{},"عند استخدام الطريقة السابقة في ضبط حجم الخط بشكل مرن، يرجى مراعاة استخدام وحدة القياس ",[61,417,418],{},"rem"," وليس ",[61,421,92],{}," عند ضبط القياسات المخصصة مثل العناوين ",[61,424,425],{},"H1"," و ",[61,428,429],{},"H2"," وغيرها",[54,432,434],{"className":56,"code":433,"language":58,"meta":59,"style":59},"h1 {\n    font-size: 1.8rem;\n}\nh2 {\n    font-size: 1.5rem;\n}\n",[61,435,436,443,456,460,466,479],{"__ignoreMap":59},[64,437,438,441],{"class":66,"line":67},[64,439,440],{"class":70},"h1",[64,442,75],{"class":74},[64,444,445,447,449,452,454],{"class":66,"line":78},[64,446,82],{"class":81},[64,448,85],{"class":74},[64,450,451],{"class":81},"1.8",[64,453,418],{"class":91},[64,455,95],{"class":74},[64,457,458],{"class":66,"line":98},[64,459,101],{"class":74},[64,461,462,464],{"class":66,"line":104},[64,463,43],{"class":70},[64,465,75],{"class":74},[64,467,468,470,472,475,477],{"class":66,"line":127},[64,469,82],{"class":81},[64,471,85],{"class":74},[64,473,474],{"class":81},"1.5",[64,476,418],{"class":91},[64,478,95],{"class":74},[64,480,481],{"class":66,"line":135},[64,482,101],{"class":74},[11,484,485],{},"استخدام حجم الخط بالطريقة السابقة يساعد على الحفاظ على نفس النسب بين أحجام الخطوط وبعضها، مما يجعلها تبدو بأفضل حجم على الرغم من اختلاف شاشات عرضها.",[487,488,489],"style",{},"html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":59,"searchDepth":78,"depth":98,"links":491},[492,493],{"id":45,"depth":78,"text":49},{"id":275,"depth":78,"text":278},"\u002Fimages\u002F65f1c8726de8b691d83ad3af.png","2024-03-13T15:37:31.701Z","2024-03-13T15:48:40.328Z","شرح كيفية استخدام حجم خط مناسب ومثالي لكل احجام الشاشات سواء موبايل أو كمبيوتر أو غيرها.","md",{},true,"\u002Farticles\u002F65f1c83b6de8b691d83ad3a4",{"title":5,"description":497},"articles\u002F65f1c83b6de8b691d83ad3a4",[505,508],{"id":506,"label":507},"65f1c61591a5eed01d70baf8","التصميم",{"id":509,"label":510},"65f1c63091a5eed01d70bafc","ملفات التنسيق (CSS)","2024-10-14T22:15:04.603Z","GzFks7PdEwBwkeiF9sLqMErZNN0colJu011Z3r6qblM",1788209571270]