مشکلات نمایش ، سایز عکس و غیره

saalek110 · May 4, 2023

saalek110 · May 4, 2023

.......

saalek110 · May 4, 2023

When setting the size of a picture in html/css mobile, is the percentage width/height based on screen size?

I am in the middle of Oracle Apex jmobile query project where I have an HTML page. This page contains the following image code : <center> <img src="#WORKSPACE_IMAGES#Logo.svg" align="cent...

stackoverflow.com

در سایت بالا
یک نفر مشکل سایز عکس داشته و جوابهایی داده شده.
مثلا کلمه auto توصیه شده.
یا یک نفر در مورد ویوپورت چیزی گفته:
Viewport units: vw, vh, vmin, vmax

Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

این پست را زدم تا بعدا بررسی کنیم.

saalek110 · May 4, 2023

در لینک زیر:

CSS - Percentage height of mobile screen with CSS

I'm guessing the answer to this is a no - but is there a clever way to calculate 2/3 height of the mobile screen? I need a header div containing a background image to take up 2/3 of the screen hei...

stackoverflow.com

یکی این جوری نوشته در جواب:

CSS:

height: 66.6vh;

و گفته ما ۱۰۰ تاvh داریم می تونید از یک تا صد عدد بدهید.که عدد صد کل طول ویوپورت است.
باید این کد تست بشه.

و گفته باید بروسر قدیمی این طوری بنویسیم:

CSS:

height: 100%

در اینجا هم گفته چه ورژنی از چه بروسری پشتیبانی می کنه.

Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

saalek110 · May 4, 2023

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

Best of 2021 - How to Scale Your Website to Perform on Mobile Devices - DevOps.com

As we close out 2021, we at DevOps.com wanted to highlight the most popular articles of the year. Following is the sixth in our series of the Best of

devops.com

saalek110 · May 4, 2023

سوپاپ اطمینان:
یک سایت ایرانی گفته این کد را :

CSS:

img {
    max-width: 100%;
    height: auto;
}

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

آموزش ریسپانسیو با css + آپدیت 2025

ریسپانسیو بودن تصاویر در css برای طراحان وب همیشه مسئله چالش بر انگیزی بوده پس همراه من باشید تا در این مقاله به شما ریسپانسیو کردن تصاویر را آموزش دهم . میدونید که ...

7learn.com

saalek110 · May 4, 2023

ویژگی width و height در CSS | تنظیم عرض و ارتفاع عناصر - ادمین سایت

در این جلسه به کار با ویژگی width و height می‌پردازیم. با استفاده از این ویژگی‌های CSS می‌توان عرض و ارتفاع عناصر HTML را تعیین کرد.

adminesite.com

سایت بالا یک پاراگراف با استفاده از درصد ساخته. سالک : من هنوز تست نکردم.

CSS:

 <style>
 #my-paragraph {
 width: 50%;
 height: 100px;
 background-color: pink;
 }

البته کد کامل صفحه را گذاشته ولی من قسمتی را نقل کردم.

saalek110 · May 4, 2023

سایت اسکول در مورد مدیا

CSS @media Rule

Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less.

www.w3schools.com

CSS:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

شرحش:
Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less:

میگه وقتی صفحه بروسر کمتر از فلان قدر است ، فلان کار را بکن.

saalek110 · May 4, 2023

بوسیله دستور @media می توان یک دسته استایل را فقط مخصوص به یک مدیای خاص نوشت.

به عنوان مثال می توان مشخص کرد که استایل های زیر فقط زمانی استفاده شوند که مدیای مورد نظر از نوع پرینت شده باشد. یعنی زمانی که سایت ما قرار است بر روی کاغد چاپ شود این استایل ها اعمال شوند

منبع:

بوسیله دستور @media می توان یک دسته استایل را فقط مخصوص به یک مدیای خاص نوشت.

به عنوان مثال می توان مشخص کرد که استایل های زیر فقط زمانی استفاده شوند که مدیای مورد نظر از نوع پرینت شده باشد. یعنی زمانی که سایت ما قرار است بر روی کاغد چاپ شود این استایل ها اعمال شوند:

بوسیله دستور @media می توان یک دسته استایل را فقط مخصوص به یک مدیای خاص نوشت.

به عنوان مثال می توان مشخص کرد که استایل های زیر فقط زمانی استفاده شوند که مدیای مورد نظر از نوع پرینت شده باشد. یعنی زمانی که سایت ما قرار است بر روی کاغد چاپ شود این استایل ها اعمال شوند:

صفحه اصلی - آموزش طراحی وب

آموزش گام به گام طراحی وب، مطالب تخصصی CSS و دوره های پروژه محور برای یادگیری HTML، سی اس اس و جاوااسکریپت در طراحی وب سایت.

css-tricks.ir

CSS:

@media print {

  /* استایل هایی که برای چاپ اعمال می شوند */
  body {
    font-size: 10pt;
  }

  a[href]:after {
    content: "(" attr(href) ")";
    /* ... */
  }

}