Depend all sizes on shortest viewport side

How to set scale everything in a grid relative to the small side of the viewport? The illustration shows the problem in cell phone. Pad is the same. I write in a simple text editor. The upper left part shows landscape view and the rest is portrait view. The grid scales nicely throughout. However, portrait scales the text down. The thickness of the grid cell line also changes with the view. Apparently some parts scale to pixel, some to em, possibly, and so on. I want globally everything always to scale to the small side along with the grid and cell dimensions.