html - Should I use px or rem value units in my CSS? -

-

i designing new website , want compatible browsers , browser settings possible. trying decide unit of measurement should use sizes of fonts , elements, unable find conclusive answer.

my question is: should use px or rem in css?

  • so far know using px isn't compatible users adjust base font size in browser.
  • i've disregarded ems because more of hassle maintain, compared rems, cascade.
  • some rems resolution independent , therefore more desirable. others modern browsers zoom elements equally anyway, using px not problem.

i'm asking because there lot of different opinions desirable measure of distance in css, , not sure best.

tl;dr: use px.

the facts

  • first, it's extremely important know per spec, css px unit does not equal 1 physical display pixel. has always been true – in 1996 css 1 spec.

    css defines reference pixel, measures size of pixel on 96 dpi display. on display has dpi substantially different 96dpi (like retina displays), user agent rescales px unit size matches of reference pixel. in other words, rescaling why 1 css pixel equals 2 physical retina display pixels.

    that said, until 2010 (and mobile zoom situation notwithstanding), px did equal 1 physical pixel, because available displays around 96dpi.

  • sizes specified in ems relative to parent element. leads em's "compounding problem" nested elements progressively larger or smaller. example:

    body { font-size:20px; }  div { font-size:0.5em; }

    gives us:

    <body> - 20px     <div> - 10px         <div> - 5px             <div> - 2.5px                 <div> - 1.25px

  • the css3 rem, relative root html element, new rely on. of july 2012, around 75% of browsers in use support rem.

the opinion

i think agrees it's design pages accommodating everyone, , make consideration visually impaired. 1 such consideration (but not one!) allowing users make text of site bigger, it's easier read.

in beginning, way provide users way scale text size using relative size units (such ems). because browser's font size menu changed root font size. thus, if specified font sizes in px, wouldn't scale when changing browser's font size option.

modern browsers (and not-so-modern ie7) changed default scaling method zooming in on everything, including images , box sizes. essentially, make reference pixel larger or smaller.

yes, still change browser default stylesheet tweak default font size (the equivalent of old-style font size option), that's esoteric way of going , i'd wager nobody1 it. (in chrome, it's buried under advanced settings, web content, font sizes. in ie9, it's more hidden. have press alt, , go view, text size.) it's easier select zoom option in browser's main menu (or use ctrl++/-/mouse wheel).

1 - within statistical error, naturally

if assume users scale pages using zoom option, find relative units irrelevant. it's easier develop page when specified in same unit (images dealt in pixels), , don't have worry compounding. ("i told there no math" – there's dealing having calculate 1.5em works out to.)

one other potential problem of using relative units font sizes user-resized fonts may break assumptions layout makes. example, might lead text getting clipped or running long. if use absolute units, don't have worry unexpected font sizes breaking layout.

so answer use pixel units. use px everything. of course, situation may vary, , if must support ie6 (may gods of rfcs have mercy on you), you'll have use ems anyway.


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

Automatically Create Database in Entity Framework 6 with Automatic Migrations Disabled -

-
i able automatically create new database, if not exist, using code-first ef6 automatic migrations disabled. if recall correctly, before automatic migrations existed in entity framework, worked fine. however, in ef6, receive following exception: an exception of type 'system.data.entity.migrations.infrastructure.automaticmigrationsdisabledexception' occurred in entityframework.dll not handled in user code additional information: unable update database match current model because there pending changes , automatic migration disabled. either write pending model changes code-based migration or enable automatic migration. set dbmigrationsconfiguration.automaticmigrationsenabled true enable automatic migration. to verify exception not caused external factor in production project, created new test project. however, same exception. for database context, have: public class mycontext : dbcontext { public dbset<entity> entities { get; set; } ...
Read more