The concept behind responsive web design is to create a flexible website that behaves like water filling a container or a device.
Modern websites have a lot of graphic content, and this number is growing at an exponential rate. There are several ways to optimize pictures and use as few as possible. Each has its own set of drawbacks and implementation challenges. To avoid jeopardizing page performance, load time, and website weight, you must balance image quality and file size. Use the image() function to adjust image cropping depending on the device’s viewport width.
Media queries are the third essential component of a responsive website. By adjusting your entire design or sections to suit the screen size, media queries allow you to create several layouts inside one project. They give multiple responsive tiers with various designs based on the browser window’s size, orientation (landscape or portrait) and screen resolution. Resp responsive typography is still relatively new and there are no standards or one-size-fits-all solutions. Apple advises using a 16px font-size rather than the standard 12px since it is easier to read. There are various techniques you may explore in the wild to determine what works best for your project.