Why didn’t I take a simpler approach? Here are three more approaches with their advantages and drawbacks. While the results of this process are pretty compelling, it was a bit of work to get them. To read the actual output file, which is thousands of lines, check it out on GitHub. This new library offers the same devices, but they are responsive! Here it is: To create the CSS file for final use, run: sass devices_new.scss devices.css This process creates a new library in Sass. A bit of code to run the functions and read and write from files finishes the job. Finally, it appends the necessary media queries and returns the entire library as a string. As the iteration progresses, the function preserves the original line structure by rejoining the tokens. For each of the hundreds of tokens it finds that contain px, it scales that token. Then, it iterates through the entire old library in search of pixel measurements to scale. This function, which builds the new library, begins by declaring the CSS variable. var(–size-divisor)Ī CSS variable must first be declared at the beginning of the file before it can be used anywhere. Every pixel measurement in the original library will need to be wrapped in a calc() function for this to resize the whole device. The second snippet yields a length half the size of the first snippet. If we wanted to make the devices half of their original size, we would need to divide every pixel measurement by 2. The function takes an expression as an input and returns the evaluation of the function as the output, with appropriate units. The CSS calc() function allows us to change the size of the various aspects of the device. -size-divisor, a CSS custom property used with the var() function.calc(), a CSS function that can perform calculations, even when inputs have different units.There are three CSS tricks that I used to make the devices resizable: Note that the device it renders, while detailed, is rather large and does not change sizes.ĬodePen Embed Fallback Here’s the approach The authors also provided a straightforward HTML example for each device, including the iPhone X we’ll be working with throughout this article. The original library was written in Sass and implements the devices using elements with fixed sizing in pixels. Below, we’ll walk through the code involved in creating it. I set out to modify the library to make the devices responsive. An open issue listed a few options, but each had browser incompatibilities or other issues. The library implemented the device I needed with pure CSS, and they looked great, but there was a problem: the devices it offered were not responsive (i.e. I found a great library called marvelapp/devices.css. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.I was in a situation recently where I wanted to show an iPhone on a website. Then the height of the image will adjust itself automatically. To make an image responsive, you need to give a new value to its width property. When you upload an image to your website, it has a default width and height. Making an image fluid, or responsive, is actually pretty simple. How to Make Images Responsive with CSS Should I Use Relative or Absolute Units? You will also learn some of the general problems that can occur when you're trying to make images responsive – and I will try to explain how to solve them. But in this post, I would like to give a bit more detail about how to make images responsive. In the video we made an image responsive. I posted a tutorial video that explains how to make a responsive website step by step a couple of weeks ago. And if you need to center and align image on those site, you need to learn how to make images fluid or responsive with CSS. The majority of today’s websites are responsive.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |