Responsive web design (2)

Previous episode review:

Yesterday I talked about how the page responds according to different device sizes. Mainly used@ Media commandAndScale-outThese two moves.

 

Additional information:

The following CSS settings allow the image or video size to not exceed the width of the device screen:

 
IMG, Object{Max-Width:100%;}
 

This statement is generally added to the @ media screen and (max-width: 481) Judgment, mainly to prevent the mobile phone users from viewing webpages with images larger than the mobile phone screen.

This trick isHead first moblie WebIs called"Fluid image technique".

 

Can videos be responsive?

In addition to images, there is also a common multimedia formVideo. Sometimes in web design, videos are added to pages as needed. Generally, videos are uploaded to websites such as YouTube, Tudou/Youku, and Sina, add the link to our webpage.

Why can't I see YouTube videos on my iPhone? (Outside China)

When viewing webpage videos on iOS, you cannot watch flash videos without installing plug-ins without jailbreak, because browsers on the iPhone do not support Adobe Flash, this is related to the commercial competition policies of companies such as Apple. For this problem, there is a solution to the Web Design Using the YouTube video source, that is, the object embed format originally nested in the webpageCodeSegment to the new code segment.

For example, the nested code segment of the old page is:

<ObjectWidth= "230"Height= "179"Type= "Application/X-Shockwave-flash" 
Data= "Http://www.youtube.com/V/O-jOEAufDQ4? FS = 1 & amp; H1 = en_us & amp; rel = 0">
<EmbedSRC=.../>
</Object>
 

Replace it:

<IFRAMESRC="Http://www.youtube.com/EmbedO-jOEAufDQ4"Style= "Max-width: 100%"> </IFRAME>
 

We can see that the two videos are actually different. YouTube places the embedded videos displayed on mobile devices under the embed directory so that most mobile devices can watch the videos normally.

Can I use <IFRAME> for video sources in China?

The embedded video codes of Tudou and Sina are intercepted separately. The object embed method is used:

Tudou:

<Embed
SRC= "...Swf" 
Type= "Application/X-Shockwave-flash" 
AllowScriptAccess= "Always" 
Allowfullscreen= "True" 
Wmode= "Opaque" 
Width= "480"Height= "400"> </Embed>
 

Sina:

 < Div  > <  Object  ID  = 'Sinapplayer'  Width  = '000000'  Height  = '000000'  >
<  Param  Name  = 'AllowScriptAccess'  Value  = 'Alway'  />
< Embed  Pluginspage  = 'HTTP: // www.macromedia.com/go/getflashplayer'
  SRC  Region '...swf'
  Type  = 'Application/X-Shockwave-flash'
  AllowScriptAccess  = 'Alway'
  Allowfullscreen  = 'True'
  Name  = 'Sinapplayer'   
  Width = '000000'  Height  = '000000'  > </  Embed  >
</  Object  > </  Div  > 

The parameter settings are similar, but the potato code is much simpler.

Now, use the <IFRAME> code block to package the potato video address and put it into the test page. A problem occurs:

(This is an image ......)

It cannot be full screen ...... This is because the playback address is intercepted separately, and Flash-relatedAllowfullscreenAnd other settings are discarded. The IFRAME method has two problems:

FirstThe source format is not changed., Or SwF format, still cannot be played by mobile phones that do not support Adobe Flash.

Second, it is becauseFlash Player parameter settings are lostAnd some functions are lost.

This is obviously unacceptable.

For the first point, we can only expect video websites to use more common video formats to avoid the side effects of commercial competition between hardware vendors. For the second point, we will continue to use the object Embed Method, because mobile phones do not see Flash format, they have found various cracking and plug-ins to make up for it. Therefore, the web designer should follow the previous method in the absence of a more general card source format.

However, the video format is usually fixed. It is difficult to dynamically change the size of the device or the current size of the browser without using CSS. The video width can be set as a percentage. For example, if it is set to 80% of the container, the video will always occupy 80% of the width of the container, however, the height cannot be set, because most people do not scale the browser window proportionally. It is either a narrowing point or a shortening point. Therefore, it is unrealistic to scale the video size by percentage.

In this case, you still want to maintain a certain size of the video, while other parts of the web page dynamically change the layout according to the size of the browser.

As shown in the video:

We can see that the video size does not change during the entire process of pulling the browser until the browser width is smaller than the video width.Fluid image technique).

There is no new technique for making the whole effect, that is, it turns the two types of CSS size judgment into three types. For more information, see the Demo code.

[Download the Demo code here]

Summary:

The self-adaptation of video size seems to be impossible by CSS alone. We hope that mobile devices can normally watch videos on pages. We also hope that video websites can use more common video formats than flash ......

 

Let's end with the formula in a book.

RWD=Fluid-grid layouts+CSS media queries+Fluid image/Media+A state of mind

The general idea is:

Responsive Design=Stream grid layout+@ Media statement+Stream images/Media+Awareness of designers

 

Next episode notice:

When mobile devices are limited to bandwidth, network speed, and the processing speed of computing chips, their webpage performance requirements are higher than those of desktop web pages, what should they do? How can we test the performance of our page? How can we design a better performance to make mobile devices more fluent?