Full Stack Web Developer

[xgqfrms]

Full Stack Web Developer

https://www.w3schools.com/whatis/whatis_fullstack.asp

https://www.w3schools.com/whatis/whatis_fullstack_js.asp

[xgqfrms]

Responsive Web Design

https://www.w3schools.com/whatis/whatis_responsive.asp

https://www.w3schools.com/css/css_rwd_intro.asp

响应式网页设计是关于使用HTML和CSS自动调整网站大小;

响应式Web设计旨在使网站在所有设备（台式机，平板电脑和电话）上都看起来不错;

viewport

视口, 制作自适应网页时，请将以下元素添加到所有网页中：

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

Media Query

使用媒体查询，您可以为不同的浏览器尺寸定义不同的样式。

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use Media Query to add a breakpoint at 800px: */
@media screen and (max-width:800px) {
  .left , .main, .right {width:100%;}
}
</style>

Responsive Images

自适应图像是可以很好地缩放以适合任何浏览器大小的图像。

1. 当CSS width属性设置为百分比值时，在调整浏览器窗口大小时，图像将按比例缩放。

<img src="img_girl.jpg" style="width:80%;height:auto;">

2. 如果将该 max-width 属性设置为100％，则图像将按比例缩小，但绝不会放大到大于其原始大小：

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

3. 图像取决于浏览器大小, HTML <picture> 元素允许您为不同的浏览器窗口大小定义不同的图像。

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

[xgqfrms]

https://www.w3schools.com/whatis/default.asp

XML & XPath

https://www.w3schools.com/xml/xsl_intro.asp

https://www.w3schools.com/xml/xquery_intro.asp

https://www.w3schools.com/xml/xpath_intro.asp