cft

CSS Tips To Start Thinking Responsive Website

A user can access the web using various devices. As the device changes its screen sizes, resolution, and all. So it becomes necessary to optimize your website to look great on all device screens.


user

Suraj Vishwakarma

3 years ago | 2 min read

Introduction

Today, there are a lot of devices from where a user can access the web page. As the device changes its screen sizes, resolution, and all. So it becomes necessary to optimize your website to look great on all device screens. Responsiveness of your website is very very important today. So I am going to list some tips to starting thing responsive for your website.

1. Ditch "Pixel" as a unit

Ditch
Ditch "Pixel" as a unit

You might be using pixels for height/width for your contents, images, etc. But Pixels remain the same with a change in screen size and it makes the website look out of shape and give a bad impression. Instead of using pixel, use the percentage as a unit for adjusting height/width. As it adjusts itself according to screen size.

2. Use of "em" and "rem"

Use of
Use of "em" and "rem"

em and rem are two units which are dependent on other element's unit and it comes under the relative unit. em and rem will greatly help in adjusting font size and padding according to the size of the screen. You can simply change one font size and it will affect the whole document as em and rem are relative. Changing font size and padding is quite helpful to adapt to different screen sizes. I personally use em for padding and rem for font size. You can read more about em and rem on REM vs EM – The Great Debate.

3. Media Query

Media query can give more dynamic to your CSS style. By using a media query you can change the CSS style of any element according to any given condition.

Media Query
Media Query

In the above example, if the width of the page is 675px or lower then the text will align in the center, or else it will align in the left. Media query is one of the features you are going to love while making a responsive website.

4. Mobile First

Mobile First
Mobile First

I had written the blog on this topic but for some reason, I have to delete that post. But I want to add this point from my original post. This point was recommended by Seye Olajuyin. When you write CSS starts with writing for small size screen i.e. Mobile devices. This helps you to write less code. As you end up modifying less to your code.

I hope whenever you next time design a website, think responsiveness of your website. You can give your opinion or idea in the comment box. Thank you for reading the blog.

Upvote


user
Created by

Suraj Vishwakarma

Learning and helping other people to understand technology👨‍💻 || Email: surajvishwakarma625@gmail.com


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles