کوچک و بزرگ کردن متن در نمایشگر های مختلف با بوتستراپ

[ravand]

من میخوام یه متنی را در یک نمایشگر بزرگ با کمک بوتستراپ بزرگ نمایش بدم و در نمایشگر کوچکتر اندازه اش رو کوچکتر کنم. چطوری باید این کار رو بکنم؟

[MNDsoft]

برای این کار بوت استرپ کلاس های visible-xs-sm-md-lg و hidden-xs-sm-md-lg رو داره که مثلا برای متن اینجوری می تونی ازش استفاده کنی:



<p>
<h1 class="hidden-xs hidden-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dignissimos inventore obcaecati numquam voluptatum tempora ad tempore. Molestiae beatae maiores, provident fuga, eos dolorem, dicta consectetur culpa numquam atque facilis.
</h1>
<h6 class="hidden-md hidden-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dignissimos inventore obcaecati numquam voluptatum tempora ad tempore. Molestiae beatae maiores, provident fuga, eos dolorem, dicta consectetur culpa numquam atque facilis.
</h6>
</p>


دو تا متن تعریف شده، اولین متن که اندازش بزرگه توسط کلاس ها فقط در حالتی که اندازه صفحه بزرگ و متوسط باشه نمایش داده میشه و اگه صفحه کوچک بشه مخفی میشه.
متن دوم هم که اندازش کوچیکه فقط در حالتی که اندازه صفحه کوچک و خیلی کوچک باشه نمایش داده میشه و اگه اندازه صفحه بزرگ بشه مخفی میشه.
اینجوری می تونید چیزی رو که می خواید بسازید.
برای اطلاعات بیشتر:
http://getbootstrap.com/css/#responsive-utilities

[ravand]

من خودم هم با همین col کار میکنم ولی گفتم شاید روش دیگه ای هم باشه و نیازی نباشه که حتما ما چند تا متن بنویسم و یکیش رو توی اون نمایشگر و دیگری رو توی اون نمایشگر نمایش بدیم.
فکر میکردم شاید راه ساده ای باشه که به متن توی این نمایشگر بزرگ یه خصوصیت بدیم و توی نمایشگر کوچکتر یه خصوصیت دیگه.

[s2/mri]

سلام

یک راه دیگه اینه که شما دوتا مدیا کوئری برای نمایش سایز های مختلف بنویسید.

مثل:



h1 {
font-size: 20px;
}

@media all and (max-device-width: 720px){
h1 {
font-size: 18px;
}
}

@media all and (max-device-width: 640px){
h1 {
font-size: 16px;
}
}

@media all and (max-device-width: 320px){
h1 {
font-size: 12px;
}
}



یه راه دیگه هم استفاده از
vw و vh و vmin

بجای پسوند هایی مثله px . pt


h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}



این سایت (http://css-tricks.com/viewport-sized-typography/) و دمو (http://css-tricks.com/examples/ViewportTypography/)


موفق باشید .

[amirali0079]

میتونی از پلاگین fittext بر پایه Javascript استفاده کنی