ریسپانسیو کردن کد

strong110

تازه وارد
سلام

سوالم شاید تخصصی نباشه

ما برای اینکه ساعت هم میلادی هم شمسی دربالای سایت نشون داده بشه از این کد استفاده کردیم :

<?php global $is_IE ?>
<div style="padding-bottom: 25px;">
<span style="text-align:right; right: 270px; position: absolute;">
امروز <?php echo jdate ('l, j F , Y'); ?> </span>
<span style="text-align:center; left: 50%; position: absolute;">
ساعت <?php echo jdate('H:i:s'); ?> </span>
<span style="text-align:left; left: 270px; position: absolute;">
Today <?php echo date ('l, j F , Y'); ?> </span>
</div>


اما توی گوشی وقتی سایت رو باز میکنیم این کد مانند سایت خودشو تنظیم نمیکنه چطور میشه اینکارو کرد ؟ که توی گوشی هم این کد دقیقا مثل نمایش سایت در PC نشون داده بشه

 

حسن غویشه

کاربر عضو
درود

وقت بخیر

<?php global $is_IE ?>
<div style="padding-bottom: 25px;">
<span style="text-align:right; right: 27%; position: absolute;">
امروز <?php echo jdate ('l, j F , Y'); ?> </span>
<span style="text-align:center; left: 50%; position: absolute;">
ساعت <?php echo jdate('H:i:s'); ?> </span>
<span style="text-align:left; left: 27%; position: absolute;">
Today <?php echo date ('l, j F , Y'); ?> </span>
</div>


تست کنید و خبر بدید :)

 

strong110

تازه وارد
درود

وقت بخیر

<?php global $is_IE ?>
<div style="padding-bottom: 25px;">
<span style="text-align:right; right: 27%; position: absolute;">
امروز <?php echo jdate ('l, j F , Y'); ?> </span>
<span style="text-align:center; left: 50%; position: absolute;">
ساعت <?php echo jdate('H:i:s'); ?> </span>
<span style="text-align:left; left: 27%; position: absolute;">
Today <?php echo date ('l, j F , Y'); ?> </span>
</div>


تست کنید و خبر بدید :)
دوست عزیز این دوتا کد که تفاوتی با هم ندارن ؟

شما تفاوتی میبینید بین کد ارسالی من و پاسخ شما ؟؟

 

strong110

تازه وارد
مهندس بی زحمت از تلگرام یه پیام به من بدید

نمیدونم کی بنده رو ریپورت کرده که نمیتونم به شما پیام بدم

 

حسن غویشه

کاربر عضو
درود

وقت بخیر

تغییر که داشته هم در مقدار خاصیت left و right و هم در واحد اندازه گیری

270px شده %27

اسم یا آیدیتون رو لطف کنید لیسک کاربران زیاده نمیشه پیدا کنم

:)

 
آخرین ویرایش توسط مدیر:

strong110

تازه وارد
سلام

کدی که دادید تست شد

اولا این کد که کلا تنظیمی که برای مرورگر PC بود رو به هم میریزه

و توی موبایل هم همه رو تو هم توهم میکنه

 

حسن غویشه

کاربر عضو
سلام


vw


vw یا همان viewport width وابسته به عرض viewport است.

یک واحد vw برابر با یک صدم عرض viewport است. یعنی 1vw برابر 1% عرض viewport خواهد بود.



از واحد های نسبی vw استفاده کردم تا نسبت به عرض viewport اندازه عناصر و فاصله آنها تا عنصر پایینی تطبیق پیدا کنه :)

<?php global $is_IE ?>
<div style="padding-bottom: 4vw; font-size: 2vw;">
<span style="text-align:right; right: 5vw; position: absolute;">
امروز <?php echo jdate ('l, j F , Y'); ?> </span>
<span style="text-align:center; left: 50vw; position: absolute;">
ساعت <?php echo jdate('H:i:s'); ?> </span>
<span style="text-align:left; left: 5vw; position: absolute;">
Today <?php echo date ('l, j F , Y'); ?> </span>
</div>




:)

 
بالا