However, that requires just as much preprocessing as this article’s approach, and I think it is more elegant to perform these calculations directly rather than manipulate font sizes. This could be addressed by scaling all of the values down by a factor of 100 and then applying standard font sizes. This approach could also run into trouble if a visitor to your website is using assistive technology that increases font size. However, getting them small enough to fit on a mobile display may require minuscule font sizes, smaller than the minimum sizes browsers, like Chrome, enforce. Then, the devices shrink and grow according to font size. Replace px with emĪnother find-and-replace approach prescribes replacing all instances of px with em. Among other limitations, it is not supported in Firefox. This won’t work for a simple reason: zoom is a non-standard property. This would uniformly scale the device and could be paired with media queries as with my solution, but would function without the troublesome calc() and variable. One initially promising approach would be to use zoom to scale the devices. 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. I was in a situation recently where I wanted to show an iPhone on a website.
0 Comments
Leave a Reply. |