登录查看更多内容

What are some common responsive design patterns and how do you implement them?

由人工智能和领英社区提供技术支持

Responsive web design is a skill that allows you to create websites that adapt to different screen sizes and devices. It helps you improve the user experience, accessibility, and performance of your web pages. One of the key aspects of responsive web design is using design patterns that suit your content and layout goals. In this article, you will learn about some common responsive design patterns and how to implement them with CSS and HTML.

此文章中的业界达人

由社区从 5 条内容中精选。了解更多

Bhargav Tibadiya

Crafting Outstanding Websites ? Web Developer with AI Magic ? Making Pixel Smarter and Digital
??Klaudia Krzos

? Your Chief of Creative Stuff ? Digital ally you can trust - from websites to video edits, I bring your vision to life…
Andrew Locklair

Full Stack Senior Software Dev | Crafting Frictionless Experiences @ Frogslayer | Proficient in React, Angular, C#…

1 Fluid Grids

Fluid grids are a responsive design pattern that use relative units, such as percentages, to define the width and height of elements. This way, the elements can resize and reposition according to the available space in the viewport. To create a fluid grid, you need to set the width of the container element to 100% and then divide it into columns using the CSS property grid-template-columns. You can also use grid-gap to add some space between the columns. For example, this code creates a three-column fluid grid:

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

添加您的观点

2 Flexible Images

Flexible images are another responsive design pattern that adjust their size and resolution according to the screen dimensions. This way, the images can fit the available space without stretching, cropping, or losing quality. To create flexible images, you need to set the width and height of the image elements to auto and then use the CSS property max-width to limit their maximum size. For example, this code makes the images flexible and sets their maximum width to 100% of their parent element:

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

添加您的观点

Zainul Abdeen Imran

Wordpress | Html | Css | Javascript | Php | web Developer ??
举报内容
Images not adjusting to screen size. Images need to fit available space. Set width and height to auto. - Adjust size and resolution accordingly. - Avoid stretching, cropping, or quality loss. - Use property max-width for limit. Create flexible images for responsive design.

已翻译

赞

3 Media Queries

Media queries are a responsive design pattern that use conditional statements to apply different styles based on the characteristics of the device or the viewport, such as width, height, orientation, or resolution. This way, you can create breakpoints that change the layout, typography, or visibility of elements according to the screen size. To use media queries, you need to write the CSS rules inside the @media rule and specify the condition using a logical operator and a media feature. For example, this code changes the font size of the headings when the viewport width is less than 600px:

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
}

添加您的观点

Bhargav Tibadiya

Crafting Outstanding Websites ? Web Developer with AI Magic ? Making Pixel Smarter and Digital
举报内容
Media queries are the best way to develop responsive design here is the one approach I follow. I Always tend to design a desktop site first and then develop responsive pages. In such a way, changes do not affect responsive design. and one thing i would like to add is that you should use custom breakpoints according to your design. Don't go with the standard one out on the internet; go with your custom in such a way whenever your design breaks the flow.

已翻译

赞
??Klaudia Krzos

? Your Chief of Creative Stuff ? Digital ally you can trust - from websites to video edits, I bring your vision to life with impact | I talk about building a mindset that turns obstacles into lessons
(已编辑)
举报内容
Over 60% of website traffic comes from mobile devices today. Starting with small screen sizes, like smartphones, helps to prioritise critical content and ensures users can access your website on the go. Progressively build designs for larger screens, by adding more complexity and adjusting layouts. Adopt a mobile-first approach in responsive design in order to craft user-friendly websites tailored for today's mobile-centric audience. Users will appreciate your efforts to optimise the mobile website experience. By providing easy access to what the user needs and focusing on making your website more enjoyable to navigate on mobile devices, you will enhance the overall User Experience.

已翻译

赞

4 Responsive Typography

Responsive typography is a responsive design pattern that adapts the font size, line height, spacing, and alignment of text according to the screen size and readability. It helps you create a consistent and comfortable reading experience for your users. To create responsive typography, you can use different techniques, such as using relative units, such as em or rem, to define the font size, using the CSS property clamp to set a minimum, maximum, and optimal font size, or using the CSS property font-size-adjust to preserve the aspect ratio of the font. For example, this code sets a responsive font size for the body text using clamp:

body {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

添加您的观点

5 Navigation Patterns

Navigation patterns are responsive design patterns that change the appearance and behavior of the navigation menu according to the screen size and user interaction. They help you provide easy and intuitive access to the main sections of your website, such as hamburger menus, dropdown menus, tabs, and off-canvas menus. To create navigation patterns, you need to use a combination of CSS and JavaScript. For instance, this code creates a hamburger menu that toggles its visibility when clicked. It involves styling the menu elements with display block and cursor pointer, as well as adding an event listener to the hamburger element that will toggle the active class on the menu element.

添加您的观点

Andrew Locklair

Full Stack Senior Software Dev | Crafting Frictionless Experiences @ Frogslayer | Proficient in React, Angular, C#, Python | Skilled in Azure and AWS
举报内容
Ensure that your navigation pattern fits both the content of your website, as well as the devices that your users will be accessing the site on. For instance, you might not want to use a hamburger menu where the screen layout is particularly large (desktop / laptop environment). Instead, you could use columns to show more navigation options and reduce the number of clicks to access the content. Use the principle of least power to accomplish your task - the less JavaScript you write, the better.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Andrew Locklair

Full Stack Senior Software Dev | Crafting Frictionless Experiences @ Frogslayer | Proficient in React, Angular, C#, Python | Skilled in Azure and AWS
举报内容
Now that CSS Flexbox and CSS Grid are widely supported, you can accomplish a lot of things that previously required hacky float layouts, table layouts (shudder) or manually-placed columns. You might not have to reach for media queries if you use flex and grid properly. They are responsive by default and can be exceptionally powerful. If you do use media queries, keep in mind that you might need to watch out for new form factors like foldable screens - could be an unwelcome surprise if you're not careful!

已翻译

赞

Responsive Web Design

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are some common responsive design patterns and how do you implement them?

1

2

3

4

5

6

1 Fluid Grids

2 Flexible Images

3 Media Queries

4 Responsive Typography

5 Navigation Patterns

6 Here’s what else to consider

Responsive Web Design

给文章评分

感谢您的反馈

更多Responsive Web Design相关文章

更多相关阅读内容