Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Responsive web design tools and technique

Md Nazrul Islam
Software Engineer
Nascenia IT
Basic html structure
Html element
In general, HTML elements can be divided into two categories : block level
and inline el...
Basic css
Total css element
Animation, appearance, backface-visibility, background, border, bottom, box, captionside, clea...
Understanding media query
What id media
The @media CSS at-rule associates a set of nested statements, in a CSS block, that...
Media query example
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="exa...
Responsive meta element
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or old...
Design simple responsive site
Create Responsive
menu/navigation
Next topics
Responsive table
 Responsive form with input field
 CSS border magic
 Responsive framework Twitter
bootstra...
Nächste SlideShare
Wird geladen in …5
×

Responsive web design tools and technique

Techniques to make your site responsive

  • Als Erste(r) kommentieren

Responsive web design tools and technique

  1. 1. Responsive web design tools and technique Md Nazrul Islam Software Engineer Nascenia IT
  2. 2. Basic html structure Html element In general, HTML elements can be divided into two categories : block level and inline elements. ◦ 1. HTML block level elements can appear in the body of an HTML page. ◦ 2. It can contain other block level as well as inline elements. ◦ 3. By default, block-level elements begin on new lines. ◦ 4. block level elements create larger structures (than inline elements). List of block element p,h1, h2, h3, h4, h5, h6, ol, ul, pre, address, blockquote, dl, div, fieldset, form , hr, noscript, table List of inline element b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea
  3. 3. Basic css Total css element Animation, appearance, backface-visibility, background, border, bottom, box, captionside, clear, clip, color, column, content, counter-increment, counterreset, cursor, direction, display, empty-cells, float, font, grid-columns, grid-rows, hangingpunctuation, height, icon, left, letter-spacing, line-height, list-style, margin, max-height, max-width, min-height, minwidth, nav, opacity, outline, overflow, overflow-x, overflow-y, padding, pagebreak, perspective, perspective-origin, position, punctuationtrim, quotes, resize, right, rotation, rotation-point, tablelayout, target, text, top, transform, transition, vertical-align, visibility, width, whitespace, word-spacing, word-break, word-wrap, z-index. Known css element background, border, clear, content, cursor, display, float, height, margin, max-height , minwidth min-width, overflow, padding, position, vertical-align, visibility, word-break. CSS pseudo element (A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected) :link, :visited, :active, :hover, :focus, :first-child, :nth-child, :nth-last-child, :nth-oftype, :first-of-type, :last-of-type, :empty, :target, :checked, :enabled, :disabled
  4. 4. Understanding media query What id media The @media CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition defined by a media query. Syntax @media <media types> { /* media-specific rules */ } Media type screen => Intended primarily for color computer screens. tv => Intended for television-type devices. all => Suitable for all devices. Example @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }
  5. 5. Media query example <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
  6. 6. Responsive meta element <meta name="viewport" content="width=device-width, initial-scale=1.0"> Internet Explorer 8 or older doesn't support media query. You can use media-queries.js Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE. <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3mediaqueries.js"></script> <![endif]-->
  7. 7. Design simple responsive site
  8. 8. Create Responsive menu/navigation
  9. 9. Next topics Responsive table  Responsive form with input field  CSS border magic  Responsive framework Twitter bootstrap and Foundation. 

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

  • anupdrao

    Oct. 11, 2015

Techniques to make your site responsive

Aufrufe

Aufrufe insgesamt

2.655

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

856

Befehle

Downloads

17

Geteilt

0

Kommentare

0

Likes

1

×