七星贝-北京seo优化公司提供搜索引擎优化,网络推广,seo优化,关键词排名,网站优化,网站建设,seo外包服务

TOP
seo网站关键词优化新闻

北京网站建设自适应网页设计的方法

责任编辑:qixingbei 发布时间:2020-06-18
1、在HTML头部增加viewport标签。
 
在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:
 
这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。
北京网站建设
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
 
例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。
 
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;  即可解决这个问题)。
 
 

( 责任编辑:搜索引擎网站优化SEO外包-七星贝网络推广公司,原创不易,转载时必须以链接形式注明作者和原始出处及本声明。)
1、声明:本页内容由北京市七星贝科技有限公司通过网络收集编辑所得,所有资料仅供用户参考;转载目的在于传递更多信息,并不代表本站赞同其观点和为其真实性负责。如您认为本网页内容有涉及版权等问题,请及时与我们联系,我们会及时处理。
2、如果您对网站优化和网络推广核心技术文章感兴趣,请点击查看SEO优化和网络推广的相关文章,请关注七星贝网络营销公司网站(www.qixingbei.net) 网站推广,整合网络营销服务商;
3、详情访问七星贝网站:网站建设,SEO优化,网站优化,整合网络推广,营销单页策划,关键词排名,营销顾问培训,微信平台开发,百度小程序开发,微信营销推广,新闻稿发布,口碑问答营销,价格优惠多多 ,多种服务套餐可供选择。
4、主营业务:seo,网站优化,网络推广,seo优化,网站推广,关键词优化,整站优化,seo公司,SEO外包,关键词排名,搜索引擎优化,seo推广,关键词优化公司,网络推广公司,网站推广公司,网站优化公司,seo优化公司,网站seo优化,网站seo,网站排名.
5、【网络推广服务商】北京市七星贝科技有限公司 www.qixingbei.net(+vx:seogood)
0

当前网址:http://www.qixingbei.net/wangzhanjianshe/1104.html