I'm in the midst of designing a webpage, but doing it on a 22" monitor with a resolution of 1680x1050. In our work environment we are using a mix of 17" and 22" monitors and of course they are all at different resolutions. How would I need to code my page to able to automatically adjust to the size of the monitor? I'm hoping it can be done without objects being moved around, just scaling down everything to fit.
Some of the tips are,
Use % while defining the div size instead of pixels
2.Use em in font-size instead of 12px,14px ...
fit the screen even for small screens- worth reading about this deeply . http://en.wikipedia.org/wiki/Responsive_Web_Design
Related
I'm running SolidWorks 2019-2020 on a Windows 10 laptop with a screen resolution of 3840 x 2160. I can create parts and sketches just fine, but the numbers on smart dimensions are so small that I can't even see them. I haven't found a way to change a default setting to resolve this issue - I've only resolved it on single documents. Thoughts?
There is no SolidWorks system option for this but there is a document option property you can use:
If you set it ON the text of the dimensions will show at the same size, even when zooming.
But since you are using a larger screen resolution, this will be too small.
If you set it OFF, you can set the scale of the dimension text to be scaled larger on a per document basis. If you want to use this setting everywhere, the only option is to change this in your template document.
It might be a good idea to file an enhancement request to SolidWorks for handling larger screen resolutions. It feels like this will be needed more and more in the future. If you put the link here, I will vote for it.
I have a 4k monitor so (not surprisingly) the text diskusage in xdiskusage is far too small. Unfortunately, there is no single way to reset dpi in linux, and it is sometimes necessary to make application specific adjustments.
Does anyone know how to change the dpi and/or font size for xdiskusage?
FYI I've already implemented some 'generic' fixes:
My ~.xprofile contains 'xrandr --dpi 157'
My autostart file (I'm using openbox) contains 'xrdb -merge /home/moi/.Xresources'
These two things fix display problems for most apps.
Some QT apps need
'export QT_DEVICE_PIXEL_RATIO=2' but that doesn't work for xdisusage.
I'd appreciate any thoughts on this.
thanks
xdiskusage uses FLTK. In general there is not a way to increase the font size in FLTK applications, according to Change GUI font size, though both that thread and High DPI with FLTK mention setting FL_NORMAL_SIZE to a larger value. FL_NORMAL_SIZE is set to 12 in xdiskusage.C, though simply changing that and recompiling may not give the best results, as mentioned also in the “Change GUI font size” thread. Also, there are several places in xdiskusage.C that set font sizes at runtime, as well as one in panels.C, that may need to be changed.
I just finished constructing web pages and am trying to decide what the optimal lay out should look like. I am trying to decide between a fixed width for my main divs (about 1200 pixles or so) and a variable percentage width. I worry that the variable width will look awful under lower resolutions of under 1600 by 900. I am assuming < 1600 X 900 resolution is pretty rare out there these days but would love some opinions.
Quazi
Re replies:
Thank you all for your valuable remarks. It turns out my problems stemmed from using a mixture of variable divs with fixed width elements. A total disaster for viewing at lower resolutions. Your comments led me in the right direction. thank you
Google has a Browser Size page which shows statistics for the browser window size of people who visit Google. You can overlay any website over the graph to see what would be visible on various browser sizes.
So while this is a different statistic from overall screen resolution, it shows that many people view the web using small browser windows - e.g. 30% have a window smaller than 1000 x 575 or so.
Note - the statistics are apparently about a year old.
I first saw this tool mentioned in this answer to a question on the Pro WebMasters SE.
I assume the average resolution for a web page is really just the average resolution for a monitor. I find fixed-width layouts kind of annoying when I go to sites that are only using a fraction of my screen, but I understand why some people do it. Getting it right on a wide range of screens can be a real pain.
If you want to make sure it looks good on all screen sizes, you can use different stylesheets for different resolutions. Or you can alter the layout using javascript as sites like amazon do.
Be better to use percentage size on CSS.It good for every platform.
I need to make a screenshot of my form created in QT designer. There are numerous approaches to do screenshots(gimp, import, etc..) but alt of them deal with same dpi as on my monitor(about 100dpi). This is quite enough to publish on web site, but 300dpi images are required for paper publications. Are there any ways to create 300dpi screenshots?
I don't think that the 300dpi requirement for publication applies to things like screenshots, where the data is inherently pixelated. It's meant for things like graphs that can and should be generated in a vector format.
Just get the best results you can, and only use screenshots for things that are absolutely necessary, and not, for example, commandline I/O or results graphs.
If the final images are being shown smoothed and blurry, either find settings in your PDF creator to prevent this, or manually blow up the image to a multiple of its original size to preserve the original sharp pixelation.
Painting can be done on any QPaintDevice, which includes QPrinter. If you wanted to, you could set up painting redirection to a given device, then have the widget repaint itself. This might give you the higher precision you desire. For more information, look on Qt's website for the Paint System overview, and also maybe look at the QPixmap::grabWidget functions.
You can not grab screenshot in a best resolution than the one of your monitor. DPI has no sense in computer display. Some software convert pixel per point (ppp) to dot per inch (dpi) for paper publication.
Once you have made your screenshots, you can convert them to 300 dpi using a software like photoshop or equivalent.
You can't have more pixels on your screenshot than your widget displays.
For a given widget size (say 900x900px) you can have your image printed at 300dpi, but it will only make a 3 inch square on your paper.
You can force your screen to behave as a 4K display with the command:
xrandr --output eDP1 --rate 40.01 --mode 1366x768 --fb 4096x3072 --panning 4096x3072
remmember to fit the rate and the mode fields as stated from your default xrandr configuration. You can see that with xrandr
and then acquire the screenshot with
import -window root imagefile.png
Suppose I want to make a Web application which uses a fixed width and height, and I want the interface to fit on screen for common screen resolutions. Assume the application will only be used on laptops and workstations (and not on mobile devices), and it will be used by IT professionals.
What is the largest possible size I can make the application? I think the key considerations here are what is the smallest screen resolution commonly used and how much space to reserve for browser chrome, which may depend on whether the user has toolbars installed, etc.
Or should I make all the page elements resizable and go with fluid layout? That seems like it might be quite a lot of work.
Fluid layouts are great if your design works for it.
Otherwise, 960px wide is very common and works in pretty much any browser on a 1024x768 screen resolution (which is still VERY common).
As for height, people are generally okay with scrolling down, but if you need it in one window then you have to stay under about 500-600px depending on browser and what toolbars the user has installed.
960x600 pixels
You could use an analytics tool to figure out what resolution your current users are running.
You might try making only part of the layout fixed, and then using CSS's max-width/min-width and max-height/min-height to constrain what you must. Have decoration be fluid as much as it can (e.g. large background images shouldn't force the browser to be 1600px wide; just show as much as possible in the width available in the user's browser, without horizontal scrollbars; try setting the container width to 100%).
You could put a min-width of maybe 30em on a main text column, for comfortable reading (see Ideal line length for content), and perhaps an upper limit of something wide but still readable. It is unpleasant when browsing a site with a layout that crams the content into a small, fixed-size box, especially when it's only for the sake of preserving their design. If your design requires dynamic content to fit within a fixed size, the design could probably use some more thought.