leo_logic

自适应(电脑/平板/手机)网页,自适应网页设计练习总结
小伙伴门注意符号大小写哦!电脑端:手机端:(当然还可以写平板页面啦)①将网页调整权交给网页(html中)<h...
扫描右侧二维码阅读全文
26
2018/08

自适应(电脑/平板/手机)网页,自适应网页设计练习总结

小伙伴门注意符号大小写哦!
电脑端:

电脑端

手机端:(当然还可以写平板页面啦)

手机端1

手机端2

①将网页调整权交给网页(html中)

  • <head>标签中加入一行viewport(网页默认的宽度和高度)元标签

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    width=device-width:网页宽度默认等于屏幕宽度

initial-scale=1;1代表网页初始大小占屏幕面积的100%

  • 注意:老式浏览器(例如:IE6、7、8),需要使用css3-mediaqueries.js,如下

    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    

②禁止使用绝对宽度(css中)

不可:以下这种代码不可使用

width:10px; <!-- 这种代码不可行 -->

可行:以下两种代码均可

width: 20%;
width:auto;

③静止对字体使用固定大小(css中)

不可:以下这种代码不可使用

font-size: 12px

可行:以下代码均可行

font-size:1.2em

补充:浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了!若已经写好的网页字体的px直接除以16就是em了。

body {
  font: normal 100% Helvetica,Arial,sans-serif;
}
                                     <!--html中-->

④得是流动布局(css中)

  • 就是使用float

    #father .panel_text{
        background-color: #F5F5F2;
        float: left;
        margin-left: -88%;
        margin-top: 15%;
        width:295%;  
        height:200%; 
    }
    

⑤让网页选择适应屏幕的css,就像Java等语言中的if判断(在html中)

利用css3中的Media Query模块

提示:下面if、if else只是方便解释写的,直接将下面代码代码框的代码放在<meat>标签里

if(如果屏幕宽度小于400像素){

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />

}else if(如果400像素<屏幕宽度<600像素){

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />

}

⑦还有图片啦!

写这个简易页面时就踩了一个坑,图片没有设置。。。

css代码是具体情况,我做的练习页面是100%,但最好根据屏幕设置对应分辨率的图片!


end:第⑤步(补充类,另外一种方法)css3中@media的使用(根据屏幕,在一个css文件中判断使用哪段css代码)

先看看定义:

  • 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
  • @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

以下代码意思:如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

最后来个总结吧:印象最深的就是自适应的思维和物理学很近有木有!由于物体可以选取其他不同的东西做参考,所以物理书:“运动是绝对的,静止是相对的”那迁移到这个代码上也是一样啦!网页对应不同的屏幕标准得自动适应,那代码就得采用相对的,而不是绝对的!


2018/9/9更新
JS自动识别手机或者pc端方式(如下代码:电脑访问则进入百度,手机访问则进入leo_loigc)

<script type="text/javascript">

 var system ={};

    var p = navigator.platform;

    system.win = p.indexOf("Win") == 0;

    system.mac = p.indexOf("Mac") == 0;

    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    if(system.win||system.mac||system.xll){

 window.location.href="http://baidu.com";

    }

else{

 window.location.href="https://www.leologic.top";

}

</script>
Last modification:October 21st, 2018 at 02:04 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment