自适应网站怎么做

自适应网站怎么做

问题一：网站怎么做到自适应网页？ 首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩 放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
希望我的回答能帮到你。龙术SEO问题二：我想做一个自适应网站，有没有简单的方法 1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。问题三：自适应网站怎么做 1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体（非必要）
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
5、图片自适应（非必要）
img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; }
css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;
根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 white-space:nowrap; overflow:hidden; 即可解决这个问题）。问题四：做网站时如何让页面自适应大小 用个宽度为100%的大表格布局，所有内容都放在这个表格的单元格里面问题五：如何制作自适应网页 随着越来越多的人使用手机上网，使自适应网页设计技术变得越来越流行。自适应网页设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了（前提你有css基础）。
1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js脚本实现支持。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float:none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网
页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在
@media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体（非必要）
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
5、图片自适应（非必要）
img标签的话，只需要设置 max-width:100%;或width:100%;语句为：img { max-width:98%;}
css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;问题六：自适应网站 一般是的，也有人全部用js写，一般的自适应网站是html5的新技术，自适应网站的优势在于不管是什么设备，全部一套html代码就完成了，也不用对于移动端单独去解析一个域名，而且可以设置适应多种不同终端，但是独立建站的话，可能小屏手机需要一套，大屏幕或是pad又需要一套，成本也就比较高了，而自适应可以一次解决这些问题，不过第一次建站的成本要大问题七：如何制作自适应网页 怎么做自适应网站 首先，在nicebox的模板市场是选一个模板网站，买了之后会有配套的域名和空间，安装模板后直接修改里面的图片和文字，之后调整发布就可以了，可以正常优化。问题八：有没有人介绍下网页自适应优点有哪些？不做又会如何？谢谢 网站自适应优点如下：1、更少维护开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。2、积累分享响应式网站设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。3、用户友好响应式的网站设计能够对用户产生友好度，并且对于不同的分辨率能够灵活的进行操作应用。同时还可以进行收集分享，我们可以通过网站中这些单一的网站URL地址把那些社交分享链接收集起来。缺点如下：1、时间花费开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。2、优化难对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。3、布局不好控制响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后，响应式Web设计策略才能真正实现。随着移动设备的发展，越来越多的网页开始采用自适应网页设计技术，极大的提高了网页的用户体验，因此对seo起到催进作用，那么自适应网页设计技术对seo的促进作用主要表现在如下几个方面。1、由于采用自适应网页设计技术，网页显示效果更好，极大的提供了网页的显示效果，提高了用户浏览效果，进而提高了用户体验，我们做seo的目的就是提高用户体验，因此催进了seo的效果，提高了网站关键词的排名。2、过去需要几个页面解决的问题，现在一个页面就可以解决，提高了seo的整洁程度，减少了seo页面的代码冗余。3、可以减少重复内容，有利于seo关键词的排名。4、有利于搜索引擎识别，抓取，索引，网站质量的判断等。综上所述采用自适应网页设计技术对seo还是有很多催进作用的，至少没有什么副作用，如何是新建网站或者是网站改版，还是尽量采用自适应网页设计技术对seo还是有一定作用的。应用响应式网页设计，可以使我们不必针对具体设备或屏幕编写单独的网页，不需另建单独的网址，一个页面适用于所有的设备，即自适应功能。蓝迈通联做响应式网页时，可以自动识别屏幕宽度、并做出相应调整的网页。如今，这种响应式网站设计已经成为时代的潮流了。
希望对你有帮助。问题九：如何让网页自适应所有屏幕宽度 方法有三种：
响应式网站开发
自适应布局
通过JS不断对分辨率做判断，不同的分辨率加载不同的样式（不推荐，开发成本太大）问题十：如何让网页自适应所有屏幕宽度 在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
方法：做一个网页解决问题
如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得面目全非，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得不堪入目了，这是个很值得注意的问题。
问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。