كيفية تغيير حجم حمس متناسب إلى النص في الداخل؟
https://stackoverflow.com/questions/773747
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لنفترض أن لدينا قلم العنصر مع الحشو صفر، لتحديد المواقع المطلقة، عرض محدد مسبقا (بالبكسل) وبعض النص العادي في الداخل.
الآن، نحن زيادة ملكية حجم الخط CSS للنص بواسطة بكسل واحد. من خلال ما يجب أن أقدم عرض قلم بحيث لا يزال تخطيطها هو نفسه (أي أي كلمات تقفز من سطر واحد إلى آخر بسبب زيادة العرض غير متناسب)؟
في حال لم يكن ذلك ممكنا مع مجموعة CSS حجم الخط في بكسل، يجب تعيينه بات أو مليا, ، و لماذا؟
المحلول
تريد تحديد كل من عرض div وحجم الخط في EMS. فيما يلي مثال حيث يؤدي تغيير حجم الخط في البكسل إلى تغيير حجم DIV والنص لتغيير حجمه بالتناسب دون تغيير التخطيط:
<html>
<head>
<title>Proportional Resize Example</title>
<style>
body {font-size:10px}
div {
position:absolute;
top:100px;
left:100px;
width:20em;
font-size:2em;
padding:0;
background:green}
</style>
<head>
<body>
<div>
This text will resize proportionally.
This text will resize proportionally.
This text will resize proportionally.
</div>
</body>
</html>
في هذا المثال، إذا قمت بتغيير حجم الخط لعنصر الجسم، فسيتم تغيير حجم كل شيء بالتناسب. وذلك لأن EMS اعتدنا تحديد الأحجام في Div يقاس نسبة إلى حجم الخط في عنصر الجسم. زيادة حجم الخط عنصر الجسم يجعل EMS أكبر في Div لكل من عرض وحجم الخط.
نصائح أخرى
لم أر شيئا من هذا القبيل القيام به في CSS أو حتى كأداة قائمة على الويب. ومع ذلك، فإن الجواب على سؤالك الثاني، وهو أفضل للخطوط أو م أو PT، مليا. وبعد لماذا ا؟ نظرا لاستخدام EM لقياس أحجام الخطوط وتناسب حسب التصميم: 1EM هو 100٪ من حجم حجم خط نصي النص. 1.1EM هو 110٪، 0.8EM هو 80٪، وهلم جرا.
سرية لديه هذا كأداة مدمجة. جربها.
new Effect.Scale('id_of_element', percent, [options]);
كما قال Clarge، EM هو مقياس يعتمد على حجم الخط من العنصر الأصل، لذلك هو الخيار الطبيعي للاستخدام عندما تريد حجم عنصر يتناسب مع حجم الخط. إذا كنت تقوم بقياس حجم الخط الخاص بك في البكسل، فهذا هو حجم الخط الخاص بك في بكسل، على سبيل المثال 200px عندما يكون حجم الخط 10px يعني 20EM.
CSS من تلقاء نفسها هو شيء ثابت للغاية، وكذلك divs.
لا يمكنك جعل خصائص عنصر واحد يعتمد على خصائص بعض واحد آخر. حتى عن عنصر واحد، لا يمكنك مزامنة بعض خصائصها مع الآخرين.
الحل المدمج الوحيد الذي يعرض بعض خصائص التكيف التلقائي هو جدول HTML، ولكن ربما لا ترغب في استخدام ذلك.
الطريقة الوحيدة لإضافة هذه الديناميات هي استخدام لغات البرنامج النصي، مثل JavaScript.
