HTML5¼¼Êõ

Òƶ¯¶Ëh5¿ª·¢Ïà¹ØÄÚÈÝ×ܽácssƪ--×Ô¼º×ܽá - daV_chen

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-05-16 12:00 ÎÒÒªÆÀÂÛ( )

Ô­ÎIJο¼ 1.¿ª·¢Òƶ¯¶Ë£¬Í·²¿±ØÒªµÄÅäÖà meta content="width=device-width,initial-scale=1,user-scalable=no"£¨¸÷ÊôÐÔÖµ²»ÔÚ½éÉÜ£¬ÔÚ¿ª·¢ÖÐСÃ×£¨2016ÄêСÃ×4£©²âÊÔuser-scalable=noÊDz»Æð×÷Óõģ© 2.remµÄʹÓÃÉèÖøù½ÚµãµÄfont-size,¿ª·¢¹ý³ÌÖÐÊÇÓÃJs¼ÆËã

Ô­ÎIJο¼

1.¿ª·¢Òƶ¯¶Ë£¬Í·²¿±ØÒªµÄÅäÖÃ
<meta content="width=device-width,initial-scale=1,user-scalable=no">£¨¸÷ÊôÐÔÖµ²»ÔÚ½éÉÜ£¬ÔÚ¿ª·¢ÖÐСÃ×£¨2016ÄêСÃ×4£©²âÊÔuser-scalable=noÊDz»Æð×÷Óõģ©
2.remµÄʹÓÃÉèÖøù½ÚµãµÄfont-size,¿ª·¢¹ý³ÌÖÐÊÇÓÃJs¼ÆËãµÄ¡£
¹«Ê½ 320/100=ÆÁÄ»³ß´ç/fontSizeÖµ
3.ÐèÒªµã»÷Ìøת£¬ÓïÒå±êÇ©ÊÇa£¨dispaly:block;£©
ÔÚÓïÒ廯¿¼ÂǵÄÇé¿öÏÂa±êÇ©ÖÐÌí¼ÓÒ»¸öspan(disply:block)£¬spanÖÐÔÚÌí¼ÓÈÝÆ÷
4.ΪÁËÓû§ÓѺÃÌåÑ飬ÔÚ¿ª·¢Òƶ¯¶ËÒ³ÃæʱºòÉèÖÃ×î´ó¿í¶ÈºÍ×îС¿í¶È¡£Èç
{
max-width:640px;
min-width:320px;
}
5.Òƶ¯¶Ë¿ª·¢Ò³ÃæһЩĬÈÏÑùʽ
½ûÖ¹a±êÇ©±³¾°
a,button,input,optgroup,select,textare{
// È¥µôa,input,buttonµã»÷ʱÀ¶É«Íâ±ß¿òºÍ»ÒÉ«°ë͸Ã÷
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
½ûÖ¹³¤°´a,img±êÇ©³öÏֲ˵¥À¸
a,img{
// ½ûÖ¹³¤°´ÏÔʾ²Ëµ¥À¸
-webkit-touch-callout:none;
}
Á÷³©¹ö¶¯
body{
-webkit-overflow-scrolling:touch;
}

6.µ¥ÐнØÈ¡²ÎÕÕ

7.calcµÄʹÓ㬲»¿¼ÂǵͰ汾£¨ie11ÒÔÏ°²×¿56ÒÔÏ£¬operaËùÓУ©¼æÈÝÐÔ£¬½¨ÒéʹÓ㬷½±ã¡£

8.box-sizingµÄʹÓ㬽â¾ö²»Í¬ä¯ÀÀÆ÷ºÐÄ£Ð͵ÄÕ¹ÏÖ²»Ò»Ö¡££¨Òƶ¯¶Ë³£Óã©
content-box;ĬÈÏÖµ±ê׼ģÐÍ£¬widthºÍheight²»°üÀ¨±ß¿òÄڱ߾àÍâ±ß¾à
padding-box;widthºÍheight°üÀ¨Äڱ߾಻°üÀ¨±ß¿òºÍÍâ±ß¾à
border-box;¹ÖÒìÄ£ÐÍwidthºÍheight°üÀ¨Äڱ߾àºÍ±ß¿ò£¬²»°üÀ¨Íâ±ß¾à¡£

9.ˮƽ´¹Ö±¾ÓÖУ¨Òƶ¯¶Ë³£Óã©
ȱµã£ºÐèÒªÖªµÀСÈÝÆ÷µÄ¿í¶ÈºÍ¸ß¶È
¸ñʽ
<div>
<div></div>
</div>
.parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
// ×¢ÒâÊÇËĸö·½Ïò¶¼ÊÇ0
.child{
position:absolute;
margin:auto;
top:0;
right;0;
bottom:0;
left:0;
width:50px;
height:50px;
background-color:gold;
}
10.line-heightµÄÉèÖã¨Òƶ¯¶Ë³£Óã©
normal:ĬÈÏ£¬×Ô¶¯·ÖÅäºÏÀíµÄÐмä¾à
numberÉèÖÃÊý×Ö£¬»áÓ뵱ǰ×ÖÌå³ß´çÏà³ËÀ´ÉèÖ㬼´±¶Êý
lengthÉèÖù̶¨Ðмä¾à
%»ùÓÚµ±Ç°×ÖÌå³ß´çµÄ°Ù·Ö±ÈÐмä¾à
inherit´Ó¸¸ÔªËؼ̳йýÀ´
¼ÇסÏÂÃ湫ʽ£¬ÀûÓÃÅųýBug
¿Õ°×¼ä¾à=lineHeight - fontSize
ÉèÖø¸ÔªËصÄline-heightΪ100%¾Í¿ÉÒÔûÓÐÁô°×

11.vertical-alignµ÷Õûͼ±ê´¹Ö±¾ÓÖУ¨Òƶ¯¶Ë³£Óã©
baseline:ÄÚÈÝÓ븸ԪËØ»ùÏ߶ÔÆë
sub:ÔªËØ»ùÏßÓ븸ԪËØϱê»ùÏ߶ÔÆë
super:ÔªËØ»ùÏßÓ븸ԪËØÉϱê»ùÏ߶ÔÆë
top:ÔªËؼ°Æäºó´ú¶¥¶ËÓëÕûÐж¥¶Ë¶ÔÆë
text-top:ÔªËض¥¶ËÓ븸ԪËØ×ÖÌåµÄ¶¥¶Ë¶ÔÆë
middel:ÔªËØÖÐÏßÓ븸ԪËصĻùÏ߶ÔÆë
bottom:ÔªËؼ°Æäºó´úµ×¶ËÓëÕûÐеĵ׶˶ÔÆë
text-bottom:ÔªËص׶ËÓ븸ԪËØ×ÖÌåµÄµ×¶Ë¶ÔÆë
percentage:°Ù·Ö±ÈÖ¸¶¨Æ«ÒÆÁ¿¡£»ùÏßÊÇ0%
length:ÊýÖµ·½Ê½£¬»ùÏßÊÇ0£¨³£Óã©

12.flexµÄʹÓÃ
ʹÓÃflexʱºò£¬Èç¹ûÁ½Áв»ÊÇƽ¾ù·ÖÅ䣬ÊÔÊÔ¸øwidthÉèÖÃΪ0
https://csstriggers.com/¼ì²écssÊôÐÔ´¥·¢µÄÄÄЩ¹ý³Ì

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • vue2.0ʵ¼ù ¡ª¡ª Node + vue ʵÏÖÒƶ¯¹ÙÍø - Raychan

    vue2.0ʵ¼ù ¡ª¡ª Node + vue ʵÏÖÒƶ¯¹ÙÍø - Raychan

    2017-05-15 09:00

  • vue.jsÓ¦Óÿª·¢±Ê¼Ç - Î÷°²-êËÖÝ

    vue.jsÓ¦Óÿª·¢±Ê¼Ç - Î÷°²-êËÖÝ

    2017-05-15 08:00

  • ΢Èí Build 2017 ¿ª·¢Õß´ó»á£ºAzure Óë AI µÄ¿ìËÙ·¢Õ¹ - ÆÏÌѳǿؼþ¼¼ÊõÍŶÓ

    ΢Èí Build 2017 ¿ª·¢Õß´ó»á£ºAzure Óë AI µÄ¿ìËÙ·¢Õ¹ - ÆÏÌѳǿؼþ

    2017-05-13 13:01

  • vue.js ³õÌåÑ顪 Chrome ²å¼þ¿ª·¢ÊµÂ¼ - ÌÚѶÔƼ¼ÊõÉçÇø

    vue.js ³õÌåÑ顪 Chrome ²å¼þ¿ª·¢ÊµÂ¼ - ÌÚѶÔƼ¼ÊõÉçÇø

    2017-05-13 13:00

ÍøÓѵãÆÀ
£