Contact Us

Beyond Web Design

Beyond Web Design

কিভাবে Website Mobile দেখতে সুন্দর দেখাবে. Responsive vs. Adaptive Website Design Mobile

website design

কিভাবে Website Mobile দেখতে সুন্দর দেখাবে. Responsive vs. Adaptive Website Design Mobile

#Responsive #Adaptive #Website_Design
How do I make my website look the same on mobile?
12 Steps to Make Your Website Mobile-Friendly
Make Your Website Responsive.
Make Information People Look for Easier to Find.
Ditch Text-Blocking Ads and Pop-ups.
Make Website Speed a Priority.
Keep Your Web Design Simple.
Make Your Button Sizes Large Enough to Work on Mobile.
Use Large Font Sizes.
Don’t Use Flash.
#Coding_Zakir
Email: codingzakir@gmail.com
How do I view a mobile site on my desktop?
Listed below are the steps to view the mobile version of a website on Chrome:
Open DevTools by pressing F12.
Click on the “Device Toggle Toolbar” available. ( …
Choose a device you want to simulate from the list of iOS and Android devices.
Once the desired device is chosen, it displays the mobile view of the website.
For Tablets (and mobile phones in landscape)

Next, we need to make a media query for tablets and mobile phones in landscape mode.

We also need to assign class names for div elements which should start with col-.

For simplicity, let’s just add md-number, where md stands for medium size screens and number is a number from 1 to 12.

Using Media Queries with Grid View

In our last lesson, we have taught you how to make a grid of columns to better organize web content.

However, our grid-view or grid system did not seem to look good on smaller devices that has smaller screen sizes.

To fix that problem, we will use media queries together with our grid system.

We will divide code into three. We’ll then have CSS codes for mobile phones, tablets and desktops (or laptops).

For Mobile Phones

Since mobile phones have smaller browser window than the rest then we need to make sure that a multi-column layout should only be a single column to better fit content.

#Responsive_WebDesign_Media_ Queries

CSS3 ,HTML5 Media Queries can be used to better do responsive web design.

A bit of a recap:

A CSS media query uses the @media at rule that applies a style sheet or CSS declaration blocks only if a certain expression or condition is true.

The example below shows a use of the @media at-rule which turns the background color pink only if the screen size is 480 pixels or wider.

ট্যাবলেটগুলির জন্য (এবং ল্যান্ডস্কেপে মোবাইল ফোন)

এর পরে, আমাদের ল্যান্ডস্কেপ মোডে ট্যাবলেট এবং মোবাইল ফোনের জন্য একটি মিডিয়া ক্যোয়ারী তৈরি করতে হবে।

আমাদের ডিভ এলিমেন্টের জন্য ক্লাসের নামও অর্পণ করতে হবে যা কল- দিয়ে শুরু হওয়া উচিত।

সরলতার জন্য, আসুন কেবল এমডি-সংখ্যা যুক্ত করুন, যেখানে এমডিটি মাঝারি আকারের পর্দার জন্য দাঁড়ায় এবং সংখ্যাটি 1 থেকে 12 পর্যন্ত একটি সংখ্যা।

গ্রিড ভিউ সহ মিডিয়া ক্যোয়ারী ব্যবহার করা

আমাদের শেষ পাঠে, আমরা আপনাকে ওয়েব কন্টেন্টকে আরও ভালভাবে সাজানোর জন্য কলামগুলির গ্রিড তৈরি করতে শিখিয়েছি।

তবে, আমাদের গ্রিড-ভিউ বা গ্রিড সিস্টেমটি ছোট স্ক্রিনের আকারযুক্ত ছোট ডিভাইসগুলিতে ভাল বলে মনে হচ্ছে না।

এই সমস্যাটি সমাধান করার জন্য, আমরা আমাদের গ্রিড সিস্টেমের সাথে মিডিয়ার প্রশ্নগুলি ব্যবহার করব।

আমরা কোডটি তিনে ভাগ করব। তারপরে আমাদের কাছে মোবাইল ফোন, ট্যাবলেট এবং ডেস্কটপগুলি (বা ল্যাপটপ) এর জন্য সিএসএস কোড থাকবে।

মোবাইল ফোনের জন্য

যেহেতু মোবাইল ফোনের বাকীগুলির চেয়ে ছোট ব্রাউজার উইন্ডো রয়েছে তারপরে আমাদের তা নিশ্চিত করতে হবে যে আরও ভাল সামগ্রীর জন্য উপযুক্ত মাল্টিপল লেআউটটি কেবল একটি কলামে হওয়া উচিত।

প্রতিক্রিয়াশীল ওয়েব ডিজাইন – মিডিয়া ক্যোয়ারী

CSS3 ,HTML5 মিডিয়া ক্যোয়ারীগুলি প্রতিক্রিয়াশীল ওয়েব ডিজাইনকে আরও ভাল করতে ব্যবহার করা যেতে পারে।

একটি পুনরুদ্ধার একটি বিট:

একটি #CSS3 মিডিয়া ক্যোয়ারী @ মিডিয়া নিয়মে ব্যবহার করে যা কোনও স্টাইল শিট বা সিএসএস ঘোষণার ব্লক প্রয়োগ করে যদি কেবল কোনও নির্দিষ্ট অভিব্যক্তি বা শর্তটি সত্য হয়।

নীচের উদাহরণটিতে @ মিডিয়া-এ-রুলের এমন একটি ব্যবহার দেখানো হয়েছে যা পর্দার আকার 480 পিক্সেল বা প্রশস্ত হলে কেবল পটভূমির রঙকে গোলাপী করে তোলে .

কোডিং জাকির
কোডিং জাকির
কোডিং জাকির

Click to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top